<!DOCTYPE html><html class="hide-aside" lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>Friend Link Card Beautify | Akilarの糖果屋</title><meta name="keywords" content="📁Hexo,🦋Butterfly"><meta name="author" content="Akilar"><meta name="copyright" content="Akilar"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="魔改友链卡片样式，目前仅支持Butterfly主题。"><meta property="og:type" content="article"><meta property="og:title" content="Friend Link Card Beautify"><meta property="og:url" content="https://akilar.top/posts/57291286/"><meta property="og:site_name" content="Akilarの糖果屋"><meta property="og:description" content="魔改友链卡片样式，目前仅支持Butterfly主题。"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://img.zcool.cn/community/01b71361dd8ce311013f01cdc36e2a.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100"><meta property="article:published_time" content="2020-12-01T17:09:19.000Z"><meta property="article:modified_time" content="2022-03-02T10:21:19.000Z"><meta property="article:author" content="Akilar"><meta property="article:tag" content="📁Hexo"><meta property="article:tag" content="🦋Butterfly"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://img.zcool.cn/community/01b71361dd8ce311013f01cdc36e2a.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100"><link rel="shortcut icon" href="https://npm.elemecdn.com/akiblog@1.0.1/img/siteicon/favicon.png"><link rel="canonical" href="https://akilar.top/posts/57291286/" media="defer" onload='this.media="all"'><link rel="preconnect" href="//cdn.jsdelivr.net"><link rel="preconnect" href="//at.alicdn.com/"><link rel="preconnect" href="//cdnjs.cloudflare.com/"><link rel="preconnect" href="//sdk.51.la"><meta name="google_site_verification" content="INnh6jnldNB3hxjSoa9ut7Kd9xX9R6Mqe7807EJsbCc"><meta name="baidu-site-verification" content="code-6O1kXu3a70"><meta name="msvalidate.01" content="3A07763DBFF970229752E8DF7999C30D"><link rel="manifest" href="/manifest.json"><link rel="apple-touch-icon" sizes="180x180" href="https://npm.elemecdn.com/akiblog@1.0.1/img/image/siteicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="https://npm.elemecdn.com/akiblog@1.0.1/img/siteicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="https://npm.elemecdn.com/akiblog@1.0.1/img/siteicon/favicon-16x16.png"><link rel="mask-icon" href="https://npm.elemecdn.com/akiblog@1.0.1/img/siteicon/safari-pinned-tab.svg" color="#5bbad5"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://npm.elemecdn.com/@fortawesome/fontawesome-free@6.1.2/css/all.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://npm.elemecdn.com/node-snackbar@0.1.16/dist/snackbar.min.css" media="print" onload='this.media="all"'><div class="js-pjax"><script charset="UTF-8" id="LA_COLLECT" src="https://sdk.51.la/js-sdk-pro.min.js"></script><script>LA.init({id:"JdyxkljyWpUOuTqt",ck:"JdyxkljyWpUOuTqt"})</script></div><script src="https://sdk.51.la/perf/js-sdk-perf.min.js" crossorigin="anonymous"></script><script>(new LingQue.Monitor).init({id:"JdzAJUCrdUGoOC7D"})</script><link rel="stylesheet" href="https://npm.elemecdn.com/akiblog@1.0.1/css/animate.min.css" media="print" onload='this.media="screen"'><link rel="stylesheet" href="https://npm.elemecdn.com/swiper@8.4.2/swiper-bundle.min.css" media="print" onload='this.media="all"'><script>const GLOBAL_CONFIG={root:"/",algolia:{appId:"STO7Z288QA",apiKey:"dbcfd77c89c49f19b42d68e572943881",indexName:"akilar",hits:{per_page:3},languages:{input_placeholder:"搜索文章",hits_empty:"找不到您查询的内容：${query}",hits_stats:"找到 ${hits} 条结果，用时 ${time} 毫秒"}},localSearch:void 0,translate:{defaultEncoding:2,translateDelay:0,msgToTraditionalChinese:"<i>繁</i><sapn>簡繁轉換</span>",msgToSimplifiedChinese:"<i>简</i><sapn>简繁转换</span>"},noticeOutdate:{limitDay:30,position:"top",messagePrev:"It has been",messageNext:"days since the last update, the content of the article may be outdated."},highlight:{plugin:"highlighjs",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:130},copy:{success:"吾辈宣布你的剪贴板已经被我占领啦！",error:"抱歉，复制好像出了点问题。",noSupport:"你的浏览器好像不支持"},relativeDate:{homepage:!1,post:!1},runtime:"天",date_suffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:void 0,lightbox:"mediumZoom",Snackbar:{chs_to_cht:"你已切换为繁体",cht_to_chs:"你已切换为简体",day_to_night:"你已切换为深色模式",night_to_day:"你已切换为浅色模式",bgLight:"#49B1F5",bgDark:"#1f1f1f",position:"top-center"},source:{justifiedGallery:{js:"https://npm.elemecdn.com/flickr-justified-gallery@2.1.2/dist/fjGallery.min.js",css:"https://npm.elemecdn.com/flickr-justified-gallery@2.1.2/dist/fjGallery.css"}},isPhotoFigcaption:!0,islazyload:!0,isAnchor:!1}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={title:"Friend Link Card Beautify",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2022-03-02 10:21:19"}</script><noscript><style>#nav{opacity:1}.justified-gallery img{opacity:1}#post-meta time,#recent-posts time{display:inline!important}</style></noscript><script>(e=>{e.saveToLocal={set:function(e,t,o){if(0===o)return;const a=864e5*o,n={value:t,expiry:(new Date).getTime()+a};localStorage.setItem(e,JSON.stringify(n))},get:function(e){const t=localStorage.getItem(e);if(!t)return;const o=JSON.parse(t);if(!((new Date).getTime()>o.expiry))return o.value;localStorage.removeItem(e)}},e.getScript=e=>new Promise((t,o)=>{const a=document.createElement("script");a.src=e,a.async=!0,a.onerror=o,a.onload=a.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,t())},document.head.appendChild(a)}),e.activateDarkMode=function(){document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#0d0d0d")},e.activateLightMode=function(){document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#ffffff")};const t=saveToLocal.get("theme"),o=(new Date).getHours();void 0===t?o<=6||o>=18?activateDarkMode():activateLightMode():"light"===t?activateLightMode():activateDarkMode();const a=saveToLocal.get("aside-status");void 0!==a&&("hide"===a?document.documentElement.classList.add("hide-aside"):document.documentElement.classList.remove("hide-aside"));/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})(window)</script><link rel="stylesheet" href="https://npm.elemecdn.com/akiblog@1.0.1/css/custom.css" media="defer" onload='this.media="all"'><link rel="stylesheet" href="https://widget.heweather.net/simple/static/css/he-simple.css?v=1.4.0" media="defer" onload='this.media="all"'><script src="https://npm.elemecdn.com/akiblog@1.0.1/js/custom/SAO-Notify.js" async></script><script async src="https://npm.elemecdn.com/akiblog@1.0.1/js/custom/carousel-touch.js"></script><svg aria-hidden="true" style="position:absolute;overflow:hidden;width:0;height:0"><symbol id="icon-sun" viewBox="0 0 1024 1024"><path d="M960 512l-128 128v192h-192l-128 128-128-128H192v-192l-128-128 128-128V192h192l128-128 128 128h192v192z" fill="#FFD878" p-id="8420"></path><path d="M736 512a224 224 0 1 0-448 0 224 224 0 1 0 448 0z" fill="#FFE4A9" p-id="8421"></path><path d="M512 109.248 626.752 224H800v173.248L914.752 512 800 626.752V800h-173.248L512 914.752 397.248 800H224v-173.248L109.248 512 224 397.248V224h173.248L512 109.248M512 64l-128 128H192v192l-128 128 128 128v192h192l128 128 128-128h192v-192l128-128-128-128V192h-192l-128-128z" fill="#4D5152" p-id="8422"></path><path d="M512 320c105.888 0 192 86.112 192 192s-86.112 192-192 192-192-86.112-192-192 86.112-192 192-192m0-32a224 224 0 1 0 0 448 224 224 0 0 0 0-448z" fill="#4D5152" p-id="8423"></path></symbol><symbol id="icon-moon" viewBox="0 0 1024 1024"><path d="M611.370667 167.082667a445.013333 445.013333 0 0 1-38.4 161.834666 477.824 477.824 0 0 1-244.736 244.394667 445.141333 445.141333 0 0 1-161.109334 38.058667 85.077333 85.077333 0 0 0-65.066666 135.722666A462.08 462.08 0 1 0 747.093333 102.058667a85.077333 85.077333 0 0 0-135.722666 65.024z" fill="#FFB531" p-id="11345"></path><path d="M329.728 274.133333l35.157333-35.157333a21.333333 21.333333 0 1 0-30.165333-30.165333l-35.157333 35.157333-35.114667-35.157333a21.333333 21.333333 0 0 0-30.165333 30.165333l35.114666 35.157333-35.114666 35.157334a21.333333 21.333333 0 1 0 30.165333 30.165333l35.114667-35.157333 35.157333 35.157333a21.333333 21.333333 0 1 0 30.165333-30.165333z" fill="#030835" p-id="11346"></path></symbol></svg><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.css" media="print" onload='this.media="all"'><meta name="generator" content="Hexo 6.2.0"><link rel="alternate" href="/atom.xml" title="Akilarの糖果屋" type="application/atom+xml"></head><body><div id="loading-box"><div class="ark-loading" id="ark-loading"><div class="ark-loading-top-container"><div class="ark-loading-top-left-flash"></div><div class="ark-loading-top-left-border"></div><div class="ark-loading-top-triangle"></div><div class="ark-loading-top-right-border"></div><div class="ark-loading-top-right-flash"></div></div><div class="ark-loading-bottom-container"><div class="ark-loading-bottom-left-border"></div><div class="ark-loading-bottom-left-triangle"></div><div class="ark-loading-bottom-center-border"></div><div class="ark-loading-bottom-right-triangle"></div><div class="ark-loading-bottom-right-border"></div></div><div class="ark-loading-main-container"><div class="ark-loading-content"><div class="ark-loading-power-left"></div><div class="ark-loading-center-left-border"></div><div class="ark-loading-cab-outside-border"><div class="ark-loading-cab-insideborder"><div class="ark-loading-cab-container"><div class="ark-loading-percentage"></div><div class="ark-loading-tip"></div></div></div></div><div class="ark-loading-center-right-border"></div><div class="ark-loading-power-right"></div></div></div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="" data-lazy-src="https://npm.elemecdn.com/akiblog@1.0.1/img/author.webp" onerror='onerror=null,src="https://npm.elemecdn.com/akiblog@1.0.1/img/404.gif"' alt="avatar"></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">480</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">63</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div><hr><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-laptop"></use></svg> <span>博客</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/archives/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-Calendar"></use></svg> <span>时间轴</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/tags/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-strategy"></use></svg> <span>标签</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/fcircle/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-forumdiscusstion"></use></svg> <span>朋友圈</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/link/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-connection"></use></svg> <span>友人帐</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-letter"></use></svg> <span>留言板</span></a></div><div class="menus_item"><a class="site-page group faa-parent animated-hover" href="javascript:void(0);" rel="external nofollow noreferrer"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-hourglass"></use></svg> <span>生活</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="faa-parent animated-hover site-page child" href="/gallery/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-strategy"></use></svg> <span>相册</span></a></li><li><a class="faa-parent animated-hover site-page child" href="/bangumis/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-unicorn"></use></svg> <span>追番</span></a></li><li><a class="faa-parent animated-hover site-page child" href="/about/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-Achievement"></use></svg> <span>关于</span></a></li></ul></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="javascript:toRandomPost()" rel="external nofollow noreferrer"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-teamwork"></use></svg> <span>随便看看</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image:url(https://img.zcool.cn/community/01b71361dd8ce311013f01cdc36e2a.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100)"><div class="menu-container" id="menu-container"><div class="menu-item"><div class="menu-item-main"><a class="site-page faa-parent animated-hover" href="/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-laptop"></use></svg> <span>博客</span></a></div><div class="menu-item-main"><a class="site-page faa-parent animated-hover" href="/archives/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-Calendar"></use></svg> <span>时间轴</span></a></div><div class="menu-item-main"><a class="site-page faa-parent animated-hover" href="/tags/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-strategy"></use></svg> <span>标签</span></a></div><div class="menu-item-main"><a class="site-page faa-parent animated-hover" href="/fcircle/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-forumdiscusstion"></use></svg> <span>朋友圈</span></a></div><div class="menu-item-main"><a class="site-page faa-parent animated-hover" href="/link/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-connection"></use></svg> <span>友人帐</span></a></div><div class="menu-item-main"><a class="site-page faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-letter"></use></svg> <span>留言板</span></a></div><div class="menu-item-main has-child"><div class="menu-item-parent"><a class="site-page faa-parent animated-hover" href="javascript:void(0);" rel="external nofollow noreferrer"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-hourglass"></use></svg> <span>生活</span></a></div><div class="menu-item-child"><a class="faa-parent animated-hover site-page child" href="/gallery/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-strategy"></use></svg> <span>相册</span></a></div><div class="menu-item-child"><a class="faa-parent animated-hover site-page child" href="/bangumis/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-unicorn"></use></svg> <span>追番</span></a></div><div class="menu-item-child"><a class="faa-parent animated-hover site-page child" href="/about/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-Achievement"></use></svg> <span>关于</span></a></div></div><div class="menu-item-main"><a class="site-page faa-parent animated-hover" href="javascript:toRandomPost()" rel="external nofollow noreferrer"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-teamwork"></use></svg> <span>随便看看</span></a></div></div><div class="top-bar"><div class="message-container"><div class="message-item message-weather" onclick="btf.scrollToDest(0,500)"><div class="message-weather-box" id="he-plugin-simple"></div></div><div class="message-item message-date" onclick="Navvisible()"><div class="message-date-box" id="message-date-box"></div><div class="message-title-box" id="message-title-box"><a id="site-name" title="魔改友链卡片样式，目前仅支持Butterfly主题。">基于Butterfly主题的友链魔改</a></div></div><div class="message-item message-function"><div id="search-button"><a class="site-page social-icon search faa-parent animated-hover"><svg class="faa-tada icon" style="height:25px;width:25px" aria-hidden="true"><use xlink:href="#icon-analitic"></use></svg> <span>搜索</span></a></div><a class="icon-V hidden faa-parent animated-hover" onclick="switchNightMode()" title="昼夜切换"><svg class="faa-tada" width="25" height="25" viewBox="0 0 1024 1024"><use id="modeicon" xlink:href="#icon-moon"></use></svg></a><div id="toggle-menu"><a class="site-page faa-parent animated-hover"><svg class="faa-tada icon" style="height:25px;width:25px" aria-hidden="true"><use xlink:href="#icon-MobileApps"></use></svg></a></div></div></div></div><button class="active-button" onclick="Navvisible()"></button></div><div id="post-info"><h1 class="post-title">Friend Link Card Beautify<a class="post-edit-link" href="https://github.com/Akilarlxh/Hexo-blog-source/edit/master/source/_posts/Akilarの糖葫芦/美化日记/Friend-Link-Card-Beautify.md" rel="external nofollow noreferrer" title="编辑" target="_blank"><i class="fas fa-feather-alt faa-tada animated-hover"></i></a></h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2020-12-01T17:09:19.000Z" title="发表于 2020-12-01 17:09:19">2020-12-01</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-03-02T10:21:19.000Z" title="更新于 2022-03-02 10:21:19">2022-03-02</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%F0%9F%8D%A1Akilar%E3%81%AE%E7%B3%96%E8%91%AB%E8%8A%A6/">🍡Akilarの糖葫芦</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">5.9k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>27分钟</span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><details class="folding-tag" red><summary>点开查看开发记录</summary><div class="content"><div class="timeline undefined"><div class="timeline-item headline"><div class="timeline-item-title"><div class="item-circle"><p>开发记录</p></div></div></div><div class="timeline-item"><div class="timeline-item-title"><div class="item-circle"><p>2022-03-02:正式版v1.9</p></div></div><div class="timeline-item-content"><ol><li>调整样式布局存放位置。</li><li>修复灯箱插件强制套壳的问题。</li><li>修复flexcard导致gallery外挂标签图片偏移的问题。</li></ol></div></div><div class="timeline-item"><div class="timeline-item-title"><div class="item-circle"><p>2021-08-09:正式版v1.8</p></div></div><div class="timeline-item-content"><ol><li>补丁样式作用域调整，修复对<code>gallery</code>标签的影响。</li></ol></div></div><div class="timeline-item"><div class="timeline-item-title"><div class="item-circle"><p>2021-08-09:正式版v1.7.3</p></div></div><div class="timeline-item-content"><ol><li>补丁样式作用域调整，修复对<code>gallery</code>标签的影响。</li></ol></div></div><div class="timeline-item"><div class="timeline-item-title"><div class="item-circle"><p>2021-03-23:正式版v1.7.2</p></div></div><div class="timeline-item-content"><ol><li>追加可能出现的BUG解决方案，修复对<code>gallery</code>标签的影响。</li><li>新增提示语，最新版已经不需要半自动截图项目。</li></ol></div></div><div class="timeline-item"><div class="timeline-item-title"><div class="item-circle"><p>2021-02-07:正式版v1.7.1</p></div></div><div class="timeline-item-content"><ol><li>追加可能出现的BUG解决方案，针对<code>flexcard</code>风格提供适配样式表</li></ol></div></div><div class="timeline-item"><div class="timeline-item-title"><div class="item-circle"><p>2021-02-04:正式版v1.7</p></div></div><div class="timeline-item-content"><ol><li>新增默认站点截图，<code>siteshot</code>配置项留空的情况下，使用<code>thum.io</code>提供的<code>API</code>自动截图。修改<code>flink.pug</code><ul><li><code>volantis</code>样式：<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">  .img</span><br><span class="line"><span class="addition">+   - var siteshot = item.siteshot ? url_for(item.siteshot) : &#x27;https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/&#x27; + item.link</span></span><br><span class="line">    if theme.lazyload.enable</span><br><span class="line"><span class="deletion">-     img(data-lazy-src=url_for(item.siteshot) onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.post_page) + `&#x27;` alt=&#x27;&#x27; )</span></span><br><span class="line"><span class="addition">+     img(data-lazy-src=siteshot onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.post_page) + `&#x27;` alt=&#x27;&#x27; )</span></span><br><span class="line">    else</span><br><span class="line"><span class="deletion">-     img(src=url_for(item.siteshot) onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.flink) + `&#x27;` alt=&#x27;&#x27; )</span></span><br><span class="line"><span class="addition">+     img(src=siteshot onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.post_page) + `&#x27;` alt=&#x27;&#x27; )</span></span><br></pre></td></tr></table></figure></li><li><code>flexcard</code>样式：<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">  .wrapper.cover</span><br><span class="line"><span class="addition">+   - var siteshot = item.siteshot ? url_for(item.siteshot) : &#x27;https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/&#x27; + item.link</span></span><br><span class="line">    if theme.lazyload.enable</span><br><span class="line"><span class="deletion">-     img.cover.fadeIn(data-lazy-src=url_for(item.siteshot) onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.post_page) + `&#x27;` alt=&#x27;&#x27; )</span></span><br><span class="line"><span class="addition">+     img.cover.fadeIn(data-lazy-src=siteshot onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.post_page) + `&#x27;` alt=&#x27;&#x27; )</span></span><br><span class="line">    else</span><br><span class="line"><span class="deletion">-     img.cover.fadeIn(src=url_for(item.siteshot) onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.flink) + `&#x27;` alt=&#x27;&#x27; )</span></span><br><span class="line"><span class="addition">+     img.cover.fadeIn(src=siteshot onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.post_page) + `&#x27;` alt=&#x27;&#x27; )</span></span><br></pre></td></tr></table></figure></li></ul></li></ol></div></div></div></div></details><details class="folding-tag" green><summary>点开查看参考内容</summary><div class="content"><p><span class="p center logo large">参考内容</span></p><div class="table-container"><table><thead><tr><th style="text-align:left">参考内容</th><th style="text-align:left">教程原帖</th></tr></thead><tbody><tr><td style="text-align:left">友链页面生成教程</td><td style="text-align:left"><div class="tag link"><a class="link-card" title="Butterfly 安装文档(二) 主题页面" href="https://butterfly.js.org/posts/dc584b87/#%E5%8F%8B%E6%83%85%E9%8F%88%E6%8E%A5" rel="external nofollow noreferrer"><div class="left"><img src="" data-lazy-src=" https://butterfly.js.org/image/avatar.png"></div><div class="right"><p class="text">Butterfly 安装文档(二) 主题页面</p><p class="url">https://butterfly.js.org/posts/dc584b87/#%E5%8F%8B%E6%83%85%E9%8F%88%E6%8E%A5</p></div>&lt;/a&gt;&lt;/div&gt;</a></div></td></tr><tr><td style="text-align:left">site-card样式</td><td style="text-align:left"><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/volantis-x/hexo-theme-volantis"><img class="no-lightbox" src="" data-lazy-src="https://github-readme-stats.vercel.app/api/pin/?username=volantis-x&repo=hexo-theme-volantis&show_owner=true"></a></td></tr><tr><td style="text-align:left">自动化友链站点批量截图</td><td style="text-align:left"><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/ChenYFan/ScreenShot"><img class="no-lightbox" src="" data-lazy-src="https://github-readme-stats.vercel.app/api/pin/?username=ChenYFan&repo=ScreenShot&show_owner=true"></a></td></tr><tr><td style="text-align:left">站点截图API文档</td><td style="text-align:left"><div class="tag link"><a class="link-card" title="thum.io文档" href="https://www.thum.io/documentation/api/url" rel="external nofollow noreferrer"><div class="left"><img src="" data-lazy-src="/img/siteicon/favicon.ico"></div><div class="right"><p class="text">thum.io文档</p><p class="url">https://www.thum.io/documentation/api/url</p></div>&lt;/a&gt;&lt;/div&gt;</a></div></td></tr><tr><td style="text-align:left">site-card样式根据issues自动更新</td><td style="text-align:left"><div class="tag link"><a class="link-card" title="tag-plugins:issues" href="https://volantis.js.org/tag-plugins/issues" rel="external nofollow noreferrer"><div class="left"><img src="" data-lazy-src=" https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png"></div><div class="right"><p class="text">tag-plugins:issues</p><p class="url">https://volantis.js.org/tag-plugins/issues</p></div>&lt;/a&gt;&lt;/div&gt;</a></div></td></tr><tr><td style="text-align:left">flink_card样式根据issues自动更新</td><td style="text-align:left"><div class="tag link"><a class="link-card" title="小康的文档库-基于Gitee的友链创建" href="https://docs.tzki.cn/Friend/" rel="external nofollow noreferrer"><div class="left"><img src="" data-lazy-src=" https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg"></div><div class="right"><p class="text">小康的文档库-基于Gitee的友链创建</p><p class="url">https://docs.tzki.cn/Friend/</p></div>&lt;/a&gt;&lt;/div&gt;</a></div></td></tr><tr><td style="text-align:left">flexcard友链样式提取</td><td style="text-align:left"><div class="tag link"><a class="link-card" title="小康的文档库-基于Gitee的友链创建" href="https://docs.tzki.cn/Friend/" rel="external nofollow noreferrer"><div class="left"><img src="" data-lazy-src=" https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg"></div><div class="right"><p class="text">小康的文档库-基于Gitee的友链创建</p><p class="url">https://docs.tzki.cn/Friend/</p></div>&lt;/a&gt;&lt;/div&gt;</a></div></td></tr></tbody></table></div></div></details><h2 id="思路解读"><a href="#思路解读" class="headerlink" title="思路解读"></a>思路解读</h2><p>Butterfly的友链太过单调了。加上之前正好移植了Volantis的一堆外挂标签样式，突发奇想用Site-card来写友链，效果相当理想。<br></p><div class="hide-block"><button type="button" class="hide-button">预览效果</button><div class="hide-content"><p><img src="" data-lazy-src="https://npm.elemecdn.com/akilar-candyassets/image/c8633a08.png" alt=""></p></div></div><p></p><h2 id="魔改步骤"><a href="#魔改步骤" class="headerlink" title="魔改步骤"></a>魔改步骤</h2><ol><li>新建友链页面。已开的可以跳过，从第2步开始.<br>参照参考教程中的<a target="_blank" rel="noopener external nofollow noreferrer" href="https://butterfly.js.org/posts/dc584b87/#%E5%8F%8B%E6%83%85%E9%8F%88%E6%8E%A5">Butterfly友链界面配置教程</a>先配置好默认友链页面。</li><li>在Hexo博客根目录<code>[Blogroot]</code>下打开终端，输入<code>hexo new page link</code>。<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new page <span class="built_in">link</span></span><br></pre></td></tr></table></figure></li><li><p>打开<code>[Blogroot]\source\link\index.md</code>,添加一行<code>type: &#39;link&#39;</code>:</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: link</span><br><span class="line">date: 2020-12-01 22:19:45</span><br><span class="line"><span class="section">type: &#x27;link&#x27;</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure></li><li>新建文件<code>[Blogroot]\source\_data\link.yml</code>,没有<code>_data</code>文件夹的话也请自己新建。以下是默认友链格式示例(<del>自己写的教程，夹带点私货不过分吧，嘻嘻</del>)。打开<code>[Blogroot]\source\_data\link.yml</code>，输入：<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">糖果屋のVIP</span></span><br><span class="line">  <span class="attr">class_desc:</span> <span class="string">售后服务享五折优惠2333</span></span><br><span class="line">  <span class="attr">link_list:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Akilar</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://akilar.top</span></span><br><span class="line">      <span class="attr">avatar:</span> <span class="string">/img/siteicon/favicon.png</span></span><br><span class="line">      <span class="attr">descr:</span> <span class="string">欢迎光临糖果屋</span></span><br></pre></td></tr></table></figure></li><li><p>取消<code>[Blogroot]\_config.butterfly.yml</code>中<code>menu</code>配置项内<code>link</code>页面的注释。</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">menu:</span></span><br><span class="line">  <span class="attr">Home:</span> <span class="string">/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-home</span></span><br><span class="line">  <span class="attr">Archives:</span> <span class="string">/archives/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-archive</span></span><br><span class="line">  <span class="attr">Tags:</span> <span class="string">/tags/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-tags</span></span><br><span class="line">  <span class="attr">Categories:</span> <span class="string">/categories/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-folder-open</span></span><br><span class="line">  <span class="comment"># List||fas fa-list:</span></span><br><span class="line">  <span class="comment">#   - Music || /music/ || fas fa-music</span></span><br><span class="line">  <span class="comment">#   - Movie || /movies/ || fas fa-video</span></span><br><span class="line">  <span class="attr">Link:</span> <span class="string">/link/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-link</span></span><br><span class="line">  <span class="comment"># About: /about/ || fas fa-heart</span></span><br></pre></td></tr></table></figure></li><li><p>修改<code>[Blogroot]\themes\butterfly\layout\includes\page\flink.pug</code>,此处添加判断机制，使得可以通过修改配置文件来切换友链风格。同时为了方便管理，把各个友链样式放到新建的文件目录<code>[Blogroot]\themes\butterfly\layout\includes\page\flink_style</code>下。</p><div class="tabs" id="flink"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#flink-1">flink.pug</button></li><li class="tab"><button type="button" data-href="#flink-2">butterfly.pug</button></li><li class="tab"><button type="button" data-href="#flink-3">volantis.pug</button></li><li class="tab"><button type="button" data-href="#flink-4">flexcard.pug</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="flink-1"><p>修改<code>[Blogroot]\themes\butterfly\layout\includes\page\flink.pug</code>，全部内容替换为：<br></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">case theme.flink_style</span><br><span class="line">  when &#x27;volantis&#x27;</span><br><span class="line">    include ./flink_style/volantis.pug</span><br><span class="line">  when &#x27;flexcard&#x27;</span><br><span class="line">    include ./flink_style/flexcard.pug</span><br><span class="line">  default</span><br><span class="line">    include ./flink_style/butterfly.pug</span><br></pre></td></tr></table></figure><p></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="flink-2"><p>新建<code>[Blogroot]\themes\butterfly\layout\includes\page\flink_style\butterfly.pug</code><br></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">#article-container</span><br><span class="line">  if top_img === false</span><br><span class="line">    h1.page-title= page.title</span><br><span class="line">  .flink</span><br><span class="line">    if site.data.link</span><br><span class="line">      each i in site.data.link</span><br><span class="line">        if i.class_name</span><br><span class="line">          h2!= i.class_name</span><br><span class="line">        if i.class_desc</span><br><span class="line">          .flink-desc!=i.class_desc</span><br><span class="line">        .flink-list</span><br><span class="line">          each item in i.link_list</span><br><span class="line">            .flink-list-item</span><br><span class="line">              a(href=url_for(item.link)  title=item.name target=&quot;_blank&quot;)</span><br><span class="line">                .flink-item-icon</span><br><span class="line">                  img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.flink) + `&#x27;` alt=item.name )</span><br><span class="line">                .flink-item-name= item.name</span><br><span class="line">                .flink-item-desc(title=item.descr)= item.descr</span><br><span class="line">  != page.content</span><br></pre></td></tr></table></figure><p></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="flink-3"><p>新建<code>[Blogroot]\themes\butterfly\layout\includes\page\flink_style\volantis.pug</code><br></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">#article-container</span><br><span class="line">  if top_img === false</span><br><span class="line">    h1.page-title= page.title</span><br><span class="line">  .flink</span><br><span class="line">    if site.data.link</span><br><span class="line">      each i in site.data.link</span><br><span class="line">        if i.class_name</span><br><span class="line">          h2!= i.class_name</span><br><span class="line">        if i.class_desc</span><br><span class="line">          .flink-desc!=i.class_desc</span><br><span class="line">        .site-card-group</span><br><span class="line">          each item in i.link_list</span><br><span class="line">            a.site-card(target=&#x27;_blank&#x27; rel=&#x27;noopener&#x27; href=url_for(item.link))</span><br><span class="line">              .img</span><br><span class="line">                - var siteshot = item.siteshot ? url_for(item.siteshot) : &#x27;https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/&#x27; + item.link</span><br><span class="line">                img.no-lightbox(src=siteshot onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.post_page) + `&#x27;` alt=&#x27;&#x27; )</span><br><span class="line">              .info</span><br><span class="line">                img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.flink) + `&#x27;` alt=&#x27;&#x27; )</span><br><span class="line">                span.title= item.name</span><br><span class="line">                span.desc(title=item.descr)= item.descr</span><br><span class="line">  != page.content</span><br></pre></td></tr></table></figure><p></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="flink-4"><p>新建<code>[Blogroot]\themes\butterfly\layout\includes\page\flink_style\flexcard.pug</code><br></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">#article-container</span><br><span class="line">  if top_img === false</span><br><span class="line">    h1.page-title= page.title</span><br><span class="line">  .flink</span><br><span class="line">    if site.data.link</span><br><span class="line">      each i in site.data.link</span><br><span class="line">        if i.class_name</span><br><span class="line">          h2!= i.class_name</span><br><span class="line">        if i.class_desc</span><br><span class="line">          .flink-desc!=i.class_desc</span><br><span class="line">        .flink-list</span><br><span class="line">          each item in i.link_list</span><br><span class="line">            a.flink-list-card(href=url_for(item.link) target=&#x27;_blank&#x27; data-title=item.descr)</span><br><span class="line">              .wrapper.cover</span><br><span class="line">                - var siteshot = item.siteshot ? url_for(item.siteshot) : &#x27;https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/&#x27; + item.link</span><br><span class="line">                img.no-lightbox.cover.fadeIn(src=siteshot onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.post_page) + `&#x27;` alt=&#x27;&#x27; )    </span><br><span class="line">              .info</span><br><span class="line">                img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.flink) + `&#x27;` alt=&#x27;&#x27; )</span><br><span class="line">                span.flink-sitename= item.name</span><br><span class="line">  != page.content</span><br></pre></td></tr></table></figure><p></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div></li><li><p>修改<code>[Blogroot]\themes\butterfly\source\css\_page\flink.styl</code>,同理，将样式文件也放到新建的<code>[Blogroot]\themes\butterfly\source\css\_flink_style</code>目录下方便管理。</p><div class="tabs" id="flink_style"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#flink_style-1">flink.styl</button></li><li class="tab"><button type="button" data-href="#flink_style-2">butterfly.styl</button></li><li class="tab"><button type="button" data-href="#flink_style-3">volantis.styl</button></li><li class="tab"><button type="button" data-href="#flink_style-4">flexcard.styl</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="flink_style-1"><p>修改<code>[Blogroot]\themes\butterfly\source\css\_page\flink.styl</code><br></p><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> <span class="built_in">hexo-config</span>(<span class="string">&#x27;flink_style&#x27;</span>) == <span class="string">&#x27;butterfly&#x27;</span></span><br><span class="line">  <span class="keyword">@import</span> <span class="string">&#x27;./_flink_style/butterfly&#x27;</span></span><br><span class="line"><span class="keyword">else</span> <span class="keyword">if</span> <span class="built_in">hexo-config</span>(<span class="string">&#x27;flink_style&#x27;</span>) == <span class="string">&#x27;volantis&#x27;</span></span><br><span class="line">  <span class="keyword">@import</span> <span class="string">&#x27;./_flink_style/volantis&#x27;</span></span><br><span class="line"><span class="keyword">else</span> <span class="keyword">if</span> <span class="built_in">hexo-config</span>(<span class="string">&#x27;flink_style&#x27;</span>) == <span class="string">&#x27;flexcard&#x27;</span></span><br><span class="line">  <span class="keyword">@import</span> <span class="string">&#x27;./_flink_style/flexcard&#x27;</span></span><br></pre></td></tr></table></figure><p></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="flink_style-2"><p>新建<code>[Blogroot]\themes\butterfly\source\css\_flink_style\butterfly.styl</code><br></p><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br></pre></td><td class="code"><pre><span class="line">.flink<span class="selector-id">#article-container</span></span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">20px</span></span><br><span class="line"><span class="selector-class">.flink-desc</span></span><br><span class="line">  <span class="attribute">margin</span>: .<span class="number">2rem</span> <span class="number">0</span> .<span class="number">5rem</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.flink-list</span></span><br><span class="line">  <span class="attribute">overflow</span>: auto</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">10px</span> <span class="number">0</span></span><br><span class="line">  <span class="attribute">text-align</span>: center</span><br><span class="line"></span><br><span class="line">  &amp; &gt; <span class="selector-class">.flink-list-item</span></span><br><span class="line">    <span class="attribute">position</span>: relative</span><br><span class="line">    <span class="attribute">float</span>: left</span><br><span class="line">    <span class="attribute">overflow</span>: hidden</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">15px</span> <span class="number">7px</span></span><br><span class="line">    <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">3</span> - <span class="number">15px</span>)</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">90px</span></span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">8px</span></span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">17px</span></span><br><span class="line">    -webkit-<span class="attribute">transform</span>: <span class="built_in">translateZ</span>(<span class="number">0</span>)</span><br><span class="line"></span><br><span class="line">    +<span class="built_in">maxWidth1024</span>()</span><br><span class="line">      <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">50%</span> - <span class="number">15px</span>) <span class="meta">!important</span></span><br><span class="line"></span><br><span class="line">    +<span class="built_in">maxWidth600</span>()</span><br><span class="line">      <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> - <span class="number">15px</span>) <span class="meta">!important</span></span><br><span class="line"></span><br><span class="line">    <span class="selector-pseudo">&amp;:hover</span></span><br><span class="line">      <span class="selector-class">.flink-item-icon</span></span><br><span class="line">        <span class="attribute">margin-left</span>: -<span class="number">10px</span></span><br><span class="line">        <span class="attribute">width</span>: <span class="number">0</span></span><br><span class="line"></span><br><span class="line">    <span class="selector-pseudo">&amp;:before</span></span><br><span class="line">      <span class="attribute">position</span>: absolute</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">0</span></span><br><span class="line">      <span class="attribute">right</span>: <span class="number">0</span></span><br><span class="line">      <span class="attribute">bottom</span>: <span class="number">0</span></span><br><span class="line">      <span class="attribute">left</span>: <span class="number">0</span></span><br><span class="line">      <span class="attribute">z-index</span>: -<span class="number">1</span></span><br><span class="line">      <span class="attribute">background</span>: <span class="built_in">var</span>(--text-bg-hover)</span><br><span class="line">      <span class="attribute">content</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line">      <span class="attribute">transition</span>: transform .<span class="number">3s</span> ease-out</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">0</span>)</span><br><span class="line"></span><br><span class="line">    <span class="selector-pseudo">&amp;:hover</span><span class="selector-pseudo">:before</span>,</span><br><span class="line">    <span class="selector-pseudo">&amp;:focus</span><span class="selector-pseudo">:before</span>,</span><br><span class="line">    <span class="selector-pseudo">&amp;:active</span><span class="selector-pseudo">:before</span></span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>)</span><br><span class="line"></span><br><span class="line">    <span class="selector-tag">a</span></span><br><span class="line">      <span class="attribute">color</span>: <span class="built_in">var</span>(--font-color)</span><br><span class="line">      <span class="attribute">text-decoration</span>: none</span><br><span class="line"></span><br><span class="line">      <span class="selector-class">.flink-item-icon</span></span><br><span class="line">        <span class="attribute">float</span>: left</span><br><span class="line">        <span class="attribute">overflow</span>: hidden</span><br><span class="line">        <span class="attribute">margin</span>: <span class="number">15px</span> <span class="number">10px</span></span><br><span class="line">        <span class="attribute">width</span>: <span class="number">60px</span></span><br><span class="line">        <span class="attribute">height</span>: <span class="number">60px</span></span><br><span class="line">        <span class="attribute">border-radius</span>: <span class="number">35px</span></span><br><span class="line">        <span class="attribute">transition</span>: width .<span class="number">3s</span> ease-out</span><br><span class="line"></span><br><span class="line">        <span class="selector-tag">img</span></span><br><span class="line">          <span class="attribute">width</span>: <span class="number">100%</span></span><br><span class="line">          <span class="attribute">height</span>: <span class="number">100%</span></span><br><span class="line">          <span class="attribute">transition</span>: filter <span class="number">375ms</span> ease-in .<span class="number">2s</span>, transform .<span class="number">3s</span></span><br><span class="line">          <span class="attribute">object-fit</span>: cover</span><br><span class="line"></span><br><span class="line">      <span class="selector-class">.img-alt</span></span><br><span class="line">        <span class="attribute">display</span>: none</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.flink-item-name</span></span><br><span class="line">  <span class="keyword">@extend</span> <span class="selector-class">.limit-one-line</span></span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">16px</span> <span class="number">10px</span> <span class="number">0</span> <span class="number">0</span></span><br><span class="line">  <span class="attribute">height</span>: <span class="number">40px</span></span><br><span class="line">  <span class="attribute">font-weight</span>: bold</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">1.43em</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.flink-item-desc</span></span><br><span class="line">  <span class="keyword">@extend</span> <span class="selector-class">.limit-one-line</span></span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">16px</span> <span class="number">10px</span> <span class="number">16px</span> <span class="number">0</span></span><br><span class="line">  <span class="attribute">height</span>: <span class="number">50px</span></span><br><span class="line">  <span class="attribute">font-size</span>: .<span class="number">93em</span></span><br><span class="line"><span class="selector-class">.flink-name</span></span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">5px</span></span><br><span class="line">  <span class="attribute">font-weight</span>: bold</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">1.5em</span></span><br></pre></td></tr></table></figure><p></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="flink_style-3"><p>新建<code>[Blogroot]\themes\butterfly\source\css\_flink_style\volantis.styl</code><br></p><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">trans</span><span class="params">(<span class="variable">$time</span> = <span class="number">0.28s</span>)</span></span></span><br><span class="line">  <span class="attribute">transition</span>: all <span class="variable">$time</span> ease</span><br><span class="line">  -moz-<span class="attribute">transition</span>: all <span class="variable">$time</span> ease</span><br><span class="line">  -webkit-<span class="attribute">transition</span>: all <span class="variable">$time</span> ease</span><br><span class="line">  -o-<span class="attribute">transition</span>: all <span class="variable">$time</span> ease</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.site-card-group</span></span><br><span class="line">  <span class="attribute">display</span>: flex</span><br><span class="line">  <span class="attribute">flex-wrap</span>: wrap</span><br><span class="line">  <span class="attribute">justify-content</span>: flex-start</span><br><span class="line">  <span class="attribute">margin</span>: -<span class="number">0.5</span> * <span class="number">16px</span></span><br><span class="line">  <span class="attribute">align-items</span>: stretch</span><br><span class="line"><span class="selector-class">.site-card</span></span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">16px</span> * <span class="number">0.5</span></span><br><span class="line">  <span class="attribute">width</span>: <span class="string">&quot;calc(100% / 4 - %s)&quot;</span> % <span class="number">16px</span></span><br><span class="line">  <span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>: <span class="number">2048px</span>)</span><br><span class="line">      <span class="attribute">width</span>: &quot;calc(<span class="number">100%</span> / <span class="number">5</span> - %s)&quot; % <span class="number">16px</span></span><br><span class="line">  @media screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>)</span><br><span class="line">      <span class="attribute">width</span>: &quot;calc(<span class="number">100%</span> / <span class="number">3</span> - %s)&quot; % <span class="number">16px</span></span><br><span class="line">  @media screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">500px</span>)</span><br><span class="line">      <span class="attribute">width</span>: &quot;calc(<span class="number">100%</span> / <span class="number">2</span> - %s)&quot; % <span class="number">16px</span></span><br><span class="line">  display: block</span><br><span class="line">  line-height: <span class="number">1.4</span></span><br><span class="line">  <span class="attribute">height</span> <span class="number">100%</span></span><br><span class="line">  .img</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span></span><br><span class="line">    <span class="attribute">height</span> <span class="number">120px</span></span><br><span class="line">    @media screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">500px</span>)</span><br><span class="line">      <span class="attribute">height</span> <span class="number">100px</span></span><br><span class="line">    overflow: hidden</span><br><span class="line">    border-radius: <span class="number">12px</span> * <span class="number">0.5</span></span><br><span class="line">    box-shadow: <span class="number">0</span> <span class="number">1px</span> <span class="number">2px</span> <span class="number">0px</span> rgba(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.2</span>)</span><br><span class="line">    background: #f6f6f6</span><br><span class="line">    img</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100%</span></span><br><span class="line">      <span class="attribute">height</span> <span class="number">100%</span></span><br><span class="line">      pointer-events:none;</span><br><span class="line">      <span class="comment">// trans(.75s)</span></span><br><span class="line">      <span class="attribute">transition</span>: transform <span class="number">2s</span> ease</span><br><span class="line">      <span class="attribute">object-fit</span>: cover</span><br><span class="line"></span><br><span class="line">  <span class="selector-class">.info</span></span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">16px</span> * <span class="number">0.5</span></span><br><span class="line">    <span class="selector-tag">img</span></span><br><span class="line">      <span class="attribute">width</span>: <span class="number">32px</span></span><br><span class="line">      <span class="attribute">height</span>: <span class="number">32px</span></span><br><span class="line">      <span class="attribute">pointer-events</span>:none;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">16px</span></span><br><span class="line">      <span class="attribute">float</span>: left</span><br><span class="line">      <span class="attribute">margin-right</span>: <span class="number">8px</span></span><br><span class="line">      <span class="attribute">margin-top</span>: <span class="number">2px</span></span><br><span class="line">    <span class="selector-tag">span</span></span><br><span class="line">      <span class="attribute">display</span>: block</span><br><span class="line">    <span class="selector-class">.title</span></span><br><span class="line">      <span class="attribute">font-weight</span>: <span class="number">600</span></span><br><span class="line">      <span class="attribute">font-size</span>: <span class="built_in">var</span>(--global-font-size)</span><br><span class="line">      <span class="attribute">color</span>: <span class="number">#444</span></span><br><span class="line">      <span class="attribute">display</span>: -webkit-box</span><br><span class="line">      -webkit-box-orient: vertical</span><br><span class="line">      <span class="attribute">overflow</span>: hidden</span><br><span class="line">      -webkit-line-clamp: <span class="number">1</span></span><br><span class="line">      <span class="built_in">trans</span>()</span><br><span class="line">    <span class="selector-class">.desc</span></span><br><span class="line">      <span class="attribute">font-size</span>: <span class="built_in">var</span>(--global-font-size)</span><br><span class="line">      <span class="attribute">word-wrap</span>: break-word;</span><br><span class="line">      <span class="attribute">line-height</span>: <span class="number">1.2</span></span><br><span class="line">      <span class="attribute">color</span>: <span class="number">#888</span></span><br><span class="line">      <span class="attribute">display</span>: -webkit-box</span><br><span class="line">      -webkit-box-orient: vertical</span><br><span class="line">      <span class="attribute">overflow</span>: hidden</span><br><span class="line">      -webkit-line-clamp: <span class="number">2</span></span><br><span class="line">  <span class="selector-class">.img</span></span><br><span class="line">    <span class="built_in">trans</span>()</span><br><span class="line">  <span class="selector-pseudo">&amp;:hover</span></span><br><span class="line">    <span class="selector-class">.img</span></span><br><span class="line">      <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">4px</span> <span class="number">8px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.1</span>), <span class="number">0</span> <span class="number">2px</span> <span class="number">4px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.1</span>), <span class="number">0</span> <span class="number">4px</span> <span class="number">8px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.1</span>), <span class="number">0</span> <span class="number">8px</span> <span class="number">16px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.1</span>)</span><br><span class="line">    <span class="selector-class">.info</span> <span class="selector-class">.title</span></span><br><span class="line">      <span class="attribute">color</span>: <span class="number">#ff5722</span></span><br></pre></td></tr></table></figure><p></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="flink_style-4"><p>新建<code>[Blogroot]\themes\butterfly\source\css\_flink_style\flexcard.styl</code><br></p><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">img</span></span><br><span class="line">  <span class="attribute">margin</span> <span class="number">0</span> auto<span class="meta">!important</span></span><br><span class="line"><span class="selector-class">.flink-list</span></span><br><span class="line">  <span class="attribute">overflow</span> auto</span><br><span class="line">  &amp; &gt; <span class="selector-tag">a</span></span><br><span class="line">    <span class="attribute">width</span> <span class="built_in">calc</span>(<span class="number">25%</span> - <span class="number">15px</span>)</span><br><span class="line">    <span class="attribute">height</span> <span class="number">130px</span></span><br><span class="line">    <span class="attribute">position</span> relative</span><br><span class="line">    <span class="attribute">display</span> block</span><br><span class="line">    <span class="attribute">margin</span> <span class="number">15px</span> <span class="number">7px</span></span><br><span class="line">    <span class="attribute">float</span> left</span><br><span class="line">    <span class="attribute">overflow</span> hidden</span><br><span class="line">    <span class="attribute">border-radius</span> <span class="number">10px</span></span><br><span class="line">    <span class="attribute">transition</span> all .<span class="number">3s</span> ease <span class="number">0s</span>, transform .<span class="number">6s</span> <span class="built_in">cubic-bezier</span>(.<span class="number">6</span>, .<span class="number">2</span>, .<span class="number">1</span>, <span class="number">1</span>) <span class="number">0s</span></span><br><span class="line">    <span class="attribute">box-shadow</span> <span class="number">0</span> <span class="number">14px</span> <span class="number">38px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">08</span>), <span class="number">0</span> <span class="number">3px</span> <span class="number">8px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">06</span>)</span><br><span class="line">    <span class="selector-pseudo">&amp;:hover</span></span><br><span class="line">      <span class="selector-class">.info</span></span><br><span class="line">        <span class="attribute">transform</span> <span class="built_in">translateY</span>(-<span class="number">100%</span>)</span><br><span class="line">      <span class="selector-class">.wrapper</span></span><br><span class="line">        <span class="selector-tag">img</span></span><br><span class="line">          <span class="attribute">transform</span> <span class="built_in">scale</span>(<span class="number">1.2</span>)</span><br><span class="line">      <span class="selector-pseudo">&amp;::before</span></span><br><span class="line">        <span class="attribute">position</span>: fixed</span><br><span class="line">        <span class="attribute">width</span>:inherit</span><br><span class="line">        <span class="attribute">margin</span>:auto</span><br><span class="line">        <span class="attribute">left</span>:<span class="number">0</span></span><br><span class="line">        <span class="attribute">right</span>:<span class="number">0</span></span><br><span class="line">        <span class="attribute">top</span>:<span class="number">10%</span></span><br><span class="line">        <span class="attribute">border-radius</span>: <span class="number">10px</span></span><br><span class="line">        <span class="attribute">text-align</span>: center</span><br><span class="line">        <span class="attribute">z-index</span>: <span class="number">100</span></span><br><span class="line">        <span class="attribute">content</span>: <span class="built_in">attr</span>(data-title)</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">20px</span></span><br><span class="line">        <span class="attribute">color</span>: <span class="number">#fff</span></span><br><span class="line">        <span class="attribute">padding</span>: <span class="number">10px</span></span><br><span class="line">        <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="variable">$theme</span>-color,<span class="number">0.8</span>)</span><br><span class="line"></span><br><span class="line">    <span class="selector-class">.cover</span></span><br><span class="line">      <span class="attribute">width</span> <span class="number">100%</span></span><br><span class="line">      <span class="attribute">transition</span> transform .<span class="number">5s</span> ease-out</span><br><span class="line">    <span class="selector-class">.wrapper</span></span><br><span class="line">      <span class="attribute">position</span> relative</span><br><span class="line">      <span class="selector-class">.fadeIn</span></span><br><span class="line">        <span class="attribute">animation</span> coverIn .<span class="number">8s</span> ease-out forwards</span><br><span class="line">      <span class="selector-tag">img</span></span><br><span class="line">        <span class="attribute">height</span> <span class="number">130px</span></span><br><span class="line">        <span class="attribute">pointer-events</span> none</span><br><span class="line">    <span class="selector-class">.info</span></span><br><span class="line">      <span class="attribute">display</span> flex</span><br><span class="line">      <span class="attribute">flex-direction</span> column</span><br><span class="line">      <span class="attribute">justify-content</span> center</span><br><span class="line">      <span class="attribute">align-items</span> center</span><br><span class="line">      <span class="attribute">width</span> <span class="number">100%</span></span><br><span class="line">      <span class="attribute">height</span> <span class="number">100%</span></span><br><span class="line">      <span class="attribute">overflow</span> hidden</span><br><span class="line">      <span class="attribute">border-radius</span> <span class="number">3px</span></span><br><span class="line">      <span class="attribute">background-color</span> <span class="built_in">hsla</span>(<span class="number">0</span>, <span class="number">0%</span>, <span class="number">100%</span>, .<span class="number">7</span>)</span><br><span class="line">      <span class="attribute">transition</span> transform .<span class="number">5s</span> <span class="built_in">cubic-bezier</span>(.<span class="number">6</span>, .<span class="number">2</span>, .<span class="number">1</span>, <span class="number">1</span>) <span class="number">0s</span></span><br><span class="line">      <span class="selector-tag">img</span></span><br><span class="line">        <span class="attribute">position</span> relative</span><br><span class="line">        <span class="attribute">top</span> <span class="number">22px</span></span><br><span class="line">        <span class="attribute">width</span> <span class="number">66px</span></span><br><span class="line">        <span class="attribute">height</span> <span class="number">66px</span></span><br><span class="line">        <span class="attribute">border-radius</span> <span class="number">50%</span></span><br><span class="line">        <span class="attribute">box-shadow</span> <span class="number">0</span> <span class="number">0</span> <span class="number">10px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">3</span>)</span><br><span class="line">        <span class="attribute">z-index</span> <span class="number">1</span></span><br><span class="line">        <span class="attribute">text-align</span> center</span><br><span class="line">        <span class="attribute">pointer-events</span> none</span><br><span class="line">      <span class="selector-tag">span</span></span><br><span class="line">        <span class="attribute">padding</span> <span class="number">20px</span> <span class="number">10%</span> <span class="number">60px</span> <span class="number">10%</span></span><br><span class="line">        <span class="attribute">font-size</span> <span class="number">16px</span></span><br><span class="line">        <span class="attribute">width</span> <span class="number">100%</span></span><br><span class="line">        <span class="attribute">text-align</span> center</span><br><span class="line">        <span class="attribute">box-shadow</span> <span class="number">0</span> <span class="number">0</span> <span class="number">10px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">3</span>)</span><br><span class="line">        <span class="attribute">background-color</span> <span class="built_in">hsla</span>(<span class="number">0</span>, <span class="number">0%</span>, <span class="number">100%</span>, .<span class="number">7</span>)</span><br><span class="line">        <span class="attribute">color</span> <span class="built_in">var</span>(--font-color)</span><br><span class="line">        <span class="attribute">white-space</span> nowrap</span><br><span class="line">        <span class="attribute">overflow</span> hidden</span><br><span class="line">        <span class="attribute">text-overflow</span> ellipsis</span><br><span class="line">.flink-list&gt;<span class="selector-tag">a</span> <span class="selector-class">.info</span>,</span><br><span class="line">.flink-list&gt;<span class="selector-tag">a</span> <span class="selector-class">.wrapper</span> <span class="selector-class">.cover</span></span><br><span class="line">  <span class="attribute">position</span> absolute</span><br><span class="line">  <span class="attribute">top</span> <span class="number">0</span></span><br><span class="line">  <span class="attribute">left</span> <span class="number">0</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>:<span class="number">1024px</span>)</span><br><span class="line">  .flink-list</span><br><span class="line">    &amp; &gt; a</span><br><span class="line">      <span class="attribute">width</span> calc(<span class="number">33.33333%</span> - <span class="number">15px</span>)</span><br><span class="line"></span><br><span class="line">@media screen <span class="keyword">and</span> (<span class="attribute">max-width</span>:<span class="number">600px</span>)</span><br><span class="line">  .flink-list</span><br><span class="line">    &amp; &gt; a</span><br><span class="line">      <span class="attribute">width</span> calc(<span class="number">50%</span> - <span class="number">15px</span>)</span><br><span class="line"></span><br><span class="line">[data-theme=dark]</span><br><span class="line">  .flink-list a .info,</span><br><span class="line">  .flink-list a .info span</span><br><span class="line">    background-color rgba(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">6</span>)</span><br><span class="line">  .flink-list</span><br><span class="line">    &amp; &gt; a</span><br><span class="line">      &amp;:<span class="attribute">hover</span></span><br><span class="line">        &amp;:before</span><br><span class="line">          background-color: rgba(#<span class="number">121212</span>,<span class="number">0.8</span>);</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">div</span> &gt; <span class="selector-tag">img</span>,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">figure</span> &gt; <span class="selector-tag">img</span>,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">a</span> &gt; <span class="selector-tag">a</span> &gt; <span class="selector-tag">img</span>,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">div</span> &gt; <span class="selector-tag">a</span> &gt; <span class="selector-tag">img</span>,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">figure</span> &gt; <span class="selector-tag">a</span> &gt; <span class="selector-tag">img</span>,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">a</span> &gt; svg,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">div</span> &gt; svg,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">figure</span> &gt; svg,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">a</span> &gt; <span class="selector-tag">a</span> &gt; svg,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">div</span> &gt; <span class="selector-tag">a</span> &gt; svg,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">figure</span> &gt; <span class="selector-tag">a</span> &gt; svg</span><br><span class="line">  <span class="attribute">position</span> static<span class="meta">!important</span></span><br></pre></td></tr></table></figure><p></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div></li><li><p>因为Volantis的site-card比Butterfly的flink-card多出了一个站点缩略图，所以需要再额外添加一条配置项。修改<code>[Blogroot]\source\_data\link.yml</code>,添加一条名为<code>siteshot</code>的配置项。</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">糖果屋のVIP</span></span><br><span class="line">  <span class="attr">class_desc:</span> <span class="string">售后服务享五折优惠2333</span></span><br><span class="line">  <span class="attr">link_list:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Akilar</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://akilar.top</span></span><br><span class="line">      <span class="attr">avatar:</span> <span class="string">/img/siteicon/favicon.png</span></span><br><span class="line">      <span class="attr">descr:</span> <span class="string">欢迎光临糖果屋</span></span><br><span class="line">      <span class="attr">siteshot:</span> <span class="string">https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg</span></span><br><span class="line">      <span class="comment"># siteshot就是站点缩略图的链接。</span></span><br></pre></td></tr></table></figure></li><li><p>在<code>[Blogroot]\_config.butterfly.yml</code>中添加配置项：</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 友链样式，butterfly为默认样式，volantis为站点卡片样式.flexcard为弹性卡片样式</span></span><br><span class="line"><span class="attr">flink_style:</span> <span class="string">volantis</span> <span class="comment"># butterfly | volantis | flexcard</span></span><br></pre></td></tr></table></figure></li><li><p>站点卡片添加了懒加载和图片失效替换。对应配置项为<code>[Blogroot]\_config.butterfly.yml</code>中的：</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Replace Broken Images (替換無法顯示的圖片)</span></span><br><span class="line"><span class="attr">error_img:</span></span><br><span class="line">  <span class="attr">flink:</span>   <span class="comment"># 头像失效替换图</span></span><br><span class="line">  <span class="attr">post_page:</span>  <span class="comment"># 站点缩略图</span></span><br></pre></td></tr></table></figure></li><li>可能遇到的bug：使用<code>flexcard</code>样式时，因为全站字体大小配置与本站不一致的关系，可能导致友链卡片的头像位置偏移较大。请读者按照<code>flink.styl</code>里的注释内容自己微调。</li></ol><hr><h2 id="站点图片批量半自动截图"><a href="#站点图片批量半自动截图" class="headerlink" title="站点图片批量半自动截图"></a>站点图片批量半自动截图</h2><div class="note warning flat"><p>该项目的本意是为了弥补因为thum.io参数问题导致图片过大，从而加载较慢的问题。先将其保存下来再使用jsdelivr加速。最新版友链已经将thum.io的api内置，且调整了参数，图片大小缩小了将近40倍。也就不是很依赖于jsdelivr加速了。<del>当然若是秉持能快一点是一点原则的用户，还是可以使用的</del></p></div><details class="folding-tag" cyan><summary>半自动截图内容非必要</summary><div class="content"><p>这里使用的是<a target="_blank" rel="noopener external nofollow noreferrer" href="https://cyfan.top/">@ChenYFan</a>大佬的项目，通过调用<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.thum.io/documentation/api/url">thum.io</a>提供的接口，配合<code>github action</code>，自动下载站点截图到github中，再配合jsdelivr+github图床来引用图片。</p><h3 id="使用方法"><a href="#使用方法" class="headerlink" title="使用方法"></a>使用方法</h3><ol><li><p>首先fork项目到自己的github仓库。此处提供两个。一个是原项目。一个是我自己配置过的项目。区别在于我根据<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.thum.io/documentation/api/url">thum.io</a>提供的接口文档修改了参数，使得站点截图较小。（用我自己的站点截图作为示例，两者大小是1.2MB：34KB的程度，缩小了将近40倍。当然清晰度也不可同日而语，酌情选择）</p><ul><li><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/ChenYFan/ScreenShot"><img class="no-lightbox" src="" data-lazy-src="https://github-readme-stats.vercel.app/api/pin/?username=ChenYFan&repo=ScreenShot&show_owner=true"></a></li><li><a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/Akilarlxh/ScreenShot"><img class="no-lightbox" src="" data-lazy-src="https://github-readme-stats.vercel.app/api/pin/?username=Akilarlxh&repo=ScreenShot&show_owner=true"></a></li></ul></li><li><p>获取Token，（此处直接使用当初为github actions教程准备的配图了）。<br>访问<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/settings/tokens">Github-&gt;头像（右上角）-&gt;Settings-&gt;Developer Settings-&gt;Personal access tokens</a>-&gt;generate new token,创建的Token名称随意，但必须勾选repo项。<br><img src="" data-lazy-src="https://npm.elemecdn.com/akilar-candyassets/image/PISlRDgrsBXzcLK.png" alt=""><br><img src="" data-lazy-src="https://npm.elemecdn.com/akilar-candyassets/image/yF8cNUkmAJVBSuw.png" alt=""><br><img src="" data-lazy-src="https://npm.elemecdn.com/akilar-candyassets/image/20200923085908748.png" alt=""></p><div class="note warning flat"><p>token只会显示这一次，之后将无法查看，所以务必保证你已经记录下了Token。之后如果忘记了就只能重新生成重新配置了。</p></div></li><li><p>在你fork的项目仓库设置中，新建secrets。变量名为<code>TOKEN</code>，必须严格大写。<br><img src="" data-lazy-src="https://npm.elemecdn.com/akilar-candyassets/image/d33d5928.png" alt=""></p></li><li><p>首先需要clone项目到本地。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git <span class="built_in">clone</span> git@github.com:[GithubUsername]/ScreenShot.git</span><br></pre></td></tr></table></figure><p>然后打开项目中的<code>ScreenShot\.github\workflows\get.yml</code>,<br>按照示例添加你的友链地址。</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">curl</span> <span class="string">https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/https://&lt;YourDomain&gt;/</span> <span class="string">-o</span> <span class="string">&lt;YourDoamin&gt;.jpg</span></span><br></pre></td></tr></table></figure><p>记得将<code>curl https://purge.jsdelivr.net/gh/[GithubUsername]/ScreenShot@gh-pages/*.*</code>中的[GithubUsername]改为你自己的github账号名。</p><p>之后每次提交就会自动启动github action，将图片下载到<code>ScreenShot</code>的<code>gh-pages</code>分支。并且通过<code>purge.jsdelivr.net</code>刷新缓存。</p></li><li><p>最后，在友链配置中，就能用<code>https://cdn.jsdelivr.net/gh/[GithubUsername]/ScreenShot@gh-pages/[friend_link].jpg</code>来引用站点缩略图了。</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">糖果屋のVIP</span></span><br><span class="line">  <span class="attr">class_desc:</span> <span class="string">售后服务享五折优惠2333</span></span><br><span class="line">  <span class="attr">link_list:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Akilar</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://akilar.top</span></span><br><span class="line">      <span class="attr">avatar:</span> <span class="string">/img/siteicon/favicon.png</span></span><br><span class="line">      <span class="attr">descr:</span> <span class="string">欢迎光临糖果屋</span></span><br><span class="line">      <span class="attr">siteshot:</span> <span class="string">https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg</span>  <span class="comment"># 留空则调用API自动截图</span></span><br></pre></td></tr></table></figure></li><li><p>可能遇到的bug</p><ul><li>没有启动github action：请到仓库中找到Action，将其打开。</li><li>图片缓存未刷新：purge.jsdelivr.net的强制刷新也是玄学，这种时候只能等待了。或者手动发布release，然后使用版本号。这个是jsdelivr的使用技巧，不多做讨论。</li></ul></li></ol><div class="tip cogs faa-horizontal animated fa-slow"><p>靓仔已经在迫不及待的加我友链了，而靓女还在犹豫要不要再加下我的联系方式。</p></div></div></details><hr><h2 id="提交issues自动更新友链"><a href="#提交issues自动更新友链" class="headerlink" title="提交issues自动更新友链"></a>提交issues自动更新友链</h2><div class="tip warning"><p>使用issues自动更新友链的实质是借助相应的API读取仓库issues并获取相应的数据，然后用js写到页面上。因为不同的js没法根据配置文件进行主题样式切换，所以请读者自行选择相应的方案。（事实上两种样式是可以共存的，因为通过读取issues写入友链页面的就是完整的HTML语言，只要同时加载flink.styl和site-card.styl的内容，赋予它样式就好。真正没法共存的是通过读取link.yml生成友链页面的部分。）</p></div><div class="tabs" id="flink"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#flink-1">butterfly样式方案</button></li><li class="tab"><button type="button" data-href="#flink-2">volantis样式方案</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="flink-1"><p>原生butterfly友链样式，根据<code>issues</code>进行更新的方案，已有详细教程。请移步小康的文档库。<br>其中教程内的<code>friend.js</code>可能无法查看。此处提供可查看的链接:<a target="_blank" rel="noopener external nofollow noreferrer" href="https://unpkg.com/ifriend@1.1.0/dist/index.js">friend.js</a>。</p><div class="site-card-group"><a class="site-card" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.antmoe.com/"><div class="img"><img class="no-lightbox" src="" data-lazy-src="https://npm.elemecdn.com/akilar-friends@latest/siteshot/www.antmoe.com.jpg"></div><div class="info"><img class="no-lightbox" src="" data-lazy-src="https://npm.elemecdn.com/akilar-friends@latest/avatar/www.antmoe.com.jpg"><span class="title">Dreamy.TZK</span><span class="desc">小康博客，Butterfly优雅魔改</span></div></a></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="flink-2"><h3 id="博客配置"><a href="#博客配置" class="headerlink" title="博客配置"></a>博客配置</h3><details class="folding-tag" red><summary>点开查看博客配置方案</summary><div class="content"><ol><li><p>请移步站内教程：<a href="/posts/615e2dec/">基于Butterfly的外挂标签引入</a> 完成前置步骤引入。</p><div class="tip info"><p>如果不需要那么多标签，可以在<a href="/posts/615e2dec/">基于Butterfly的外挂标签引入</a> 教程基础上自行精简，只保留以下3个文件即可（其实核心只需要两个issues.js）。</p></div><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">scripts</span></span><br><span class="line">  <span class="string">|__tag</span></span><br><span class="line">    <span class="string">|__issues.js</span></span><br><span class="line">    <span class="comment">#渲染issues的脚本，必须</span></span><br><span class="line">    <span class="string">|__site.js</span></span><br><span class="line">    <span class="comment"># 渲染site标签的脚本，若不需要在文章中使用站点卡片样式，可以不要</span></span><br><span class="line"><span class="string">source</span></span><br><span class="line">  <span class="string">|__js</span></span><br><span class="line">     <span class="string">|__</span> <span class="string">issues.js</span></span><br><span class="line">     <span class="comment">#读取issues的api的脚本。可以不要，并换成CDN外链。</span></span><br></pre></td></tr></table></figure></li><li><p>在友链页<code>[Blogroot]\source\link\index.md</code>内添加如下内容作为标签定位：</p><ul><li><p>gitee仓库示例</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% issues sites | api=https://gitee.com/api/v5/repos/[GiteeUsername]/[GiteeReponame]/issues?sort=updated&amp;state=open&amp;page=1&amp;per<span class="emphasis">_page=100&amp;labels=active %&#125;</span></span><br></pre></td></tr></table></figure></li><li><p>github仓库示例</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% issues sites | api=https://api.github.com/repos/[GithubUsername]/[GithubReponame]/issues?sort=updated&amp;state=open&amp;page=1&amp;per<span class="emphasis">_page=100&amp;labels=active %&#125;</span></span><br></pre></td></tr></table></figure></li></ul></li><li><p>之后即可让读者根据示例来提交友链了。</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;title&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;screenshot&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;avatar&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;description&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;「keywords」&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure></li></ol><hr><div class="table-container"><table><thead><tr><th style="text-align:left">参数</th><th style="text-align:left">释义</th></tr></thead><tbody><tr><td style="text-align:left">title</td><td style="text-align:left">网站名称</td></tr><tr><td style="text-align:left">screenshot</td><td style="text-align:left">网站预览图</td></tr><tr><td style="text-align:left">url</td><td style="text-align:left">网站链接，需要添加<br><code>https://</code>协议组成完整域名。<br>否则可能被识别成站点相对路径。</td></tr><tr><td style="text-align:left">avatar</td><td style="text-align:left">站长头像</td></tr><tr><td style="text-align:left">「keywords」</td><td style="text-align:left">分组依据，<br>未必要叫「keywords」，<br>详见<a href="/posts/615e2dec/">基于Butterfly的外挂标签引入</a><br>第21节对issues标签的参数解释</td></tr></tbody></table></div></div></details><h3 id="仓库配置"><a href="#仓库配置" class="headerlink" title="仓库配置"></a>仓库配置</h3><details class="folding-tag" green><summary>Github配置方案</summary><div class="content"><ol><li><p>新建一个仓库，仓库名随意，这里我命名为<code>friend_link</code>,<br>新建文件<code>friend_link\.github\ISSUE_TEMPLATE.md</code>,<br>并在其中输入以下内容作为<code>issues</code>模板。</p><div class="tip warning faa-horizontal animated fa-slow"><p>其中的json代码块前面的反斜杠记得删去。此处这么写主要是为了转义，否则无法嵌套代码块。</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">name: 友链模板</span><br><span class="line"><span class="section">about: 请根据指示规范填写友链格式。</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line"></span><br><span class="line">&lt;!-- 请在下方代码块的双引号中填写 --&gt;</span><br><span class="line">\<span class="code">```json</span></span><br><span class="line"><span class="code">&#123;</span></span><br><span class="line"><span class="code">    &quot;title&quot;: &quot;&quot;,</span></span><br><span class="line"><span class="code">    &quot;screenshot&quot;: &quot;&quot;,</span></span><br><span class="line"><span class="code">    &quot;url&quot;: &quot;&quot;,</span></span><br><span class="line"><span class="code">    &quot;avatar&quot;: &quot;&quot;,</span></span><br><span class="line"><span class="code">    &quot;description&quot;: &quot;&quot;,</span></span><br><span class="line"><span class="code">    &quot;keywords&quot;: &quot;&quot;</span></span><br><span class="line"><span class="code">&#125;</span></span><br><span class="line"><span class="code">\```</span></span><br><span class="line"></span><br><span class="line">&lt;!--</span><br><span class="line">&quot;title&quot;: &quot;站点名称&quot;,</span><br><span class="line">&quot;screenshot&quot;: &quot;站点预览图链接&quot;,</span><br><span class="line">&quot;url&quot;: &quot;站点链接&quot;,</span><br><span class="line">&quot;avatar&quot;: &quot;头像链接&quot;,</span><br><span class="line">&quot;description&quot;: &quot;站点描述&quot;,</span><br><span class="line">&quot;keywords&quot;: &quot;关键词，作为分组名&quot;</span><br><span class="line">--&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 示例 --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!--</span><br><span class="line">&quot;title&quot;: &quot;Akilarの糖果屋&quot;,</span><br><span class="line">&quot;screenshot&quot;: &quot;https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg&quot;,</span><br><span class="line">&quot;url&quot;: &quot;https://akilar.top/&quot;,</span><br><span class="line">&quot;avatar&quot;: &quot;/img/siteicon/favicon.png&quot;,</span><br><span class="line">&quot;description&quot;: &quot;期待您的光临！&quot;,</span><br><span class="line">&quot;keywords&quot;: &quot;糖果屋&quot;</span><br><span class="line">--&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure></li><li><p>新建active label</p><p><img src="" data-lazy-src="https://npm.elemecdn.com/akilar-candyassets/image/d63b5c0c.png" alt="新建label用于控制审核结果"></p><p><img src="" data-lazy-src="https://npm.elemecdn.com/akilar-candyassets/image/6311f960.png" alt="配置名称描述颜色"></p></li><li><p>提交示例</p><p><img src="" data-lazy-src="https://npm.elemecdn.com/akilar-candyassets/image/f87ebfd3.png" alt="填写规范"><br><img src="" data-lazy-src="https://npm.elemecdn.com/akilar-candyassets/image/efdfc67d.png" alt="审核通过"></p></li><li><p>从审核通过到页面读取有一段api的缓存期，稍微有点耐心。</p></li></ol></div></details><details class="folding-tag" yellow><summary>Gitee配置方案</summary><div class="content"><ol><li><p>新建一个仓库，仓库名随意，这里我命名为<code>friend_link</code>,<br>新建文件<code>friend_link\.gitee\ISSUE_TEMPLATE.md</code>,<br>并在其中输入以下内容作为<code>issues</code>模板。</p><div class="tip warning faa-horizontal animated fa-slow"><p>其中的json代码块前面的反斜杠记得删去。此处这么写主要是为了转义，否则无法嵌套代码块。</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">name: 友链模板</span><br><span class="line"><span class="section">about: 请根据指示规范填写友链格式。</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line"></span><br><span class="line">&lt;!-- 请在下方代码块的双引号中填写 --&gt;</span><br><span class="line">\<span class="code">```json</span></span><br><span class="line"><span class="code">&#123;</span></span><br><span class="line"><span class="code">    &quot;title&quot;: &quot;&quot;,</span></span><br><span class="line"><span class="code">    &quot;screenshot&quot;: &quot;&quot;,</span></span><br><span class="line"><span class="code">    &quot;url&quot;: &quot;&quot;,</span></span><br><span class="line"><span class="code">    &quot;avatar&quot;: &quot;&quot;,</span></span><br><span class="line"><span class="code">    &quot;description&quot;: &quot;&quot;,</span></span><br><span class="line"><span class="code">    &quot;keywords&quot;: &quot;&quot;</span></span><br><span class="line"><span class="code">&#125;</span></span><br><span class="line"><span class="code">\```</span></span><br><span class="line"></span><br><span class="line">&lt;!--</span><br><span class="line">&quot;title&quot;: &quot;站点名称&quot;,</span><br><span class="line">&quot;screenshot&quot;: &quot;站点预览图链接&quot;,</span><br><span class="line">&quot;url&quot;: &quot;站点链接&quot;,</span><br><span class="line">&quot;avatar&quot;: &quot;头像链接&quot;,</span><br><span class="line">&quot;description&quot;: &quot;站点描述&quot;,</span><br><span class="line">&quot;keywords&quot;: &quot;关键词，作为分组名&quot;</span><br><span class="line">--&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 示例 --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!--</span><br><span class="line">&quot;title&quot;: &quot;Akilarの糖果屋&quot;,</span><br><span class="line">&quot;screenshot&quot;: &quot;https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg&quot;,</span><br><span class="line">&quot;url&quot;: &quot;https://akilar.top/&quot;,</span><br><span class="line">&quot;avatar&quot;: &quot;/img/siteicon/favicon.png&quot;,</span><br><span class="line">&quot;description&quot;: &quot;期待您的光临！&quot;,</span><br><span class="line">&quot;keywords&quot;: &quot;糖果屋&quot;</span><br><span class="line">--&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure></li><li><p>新建active标签</p><p><img src="" data-lazy-src="https://npm.elemecdn.com/akilar-candyassets/image/7522911b.png" alt="新建标签用于控制审核结果"></p></li></ol><ol><li><p>提交示例</p><p><img src="" data-lazy-src="https://npm.elemecdn.com/akilar-candyassets/image/dd334eea.png" alt="填写规范"><br><img src="" data-lazy-src="https://npm.elemecdn.com/akilar-candyassets/image/72d06ae1.png" alt="审核通过"></p></li><li><p>从审核通过到页面读取有一段api的缓存期，稍微有点耐心。</p></li></ol></div></details><h3 id="更多内容"><a href="#更多内容" class="headerlink" title="更多内容"></a>更多内容</h3><p>更多友链规范可以参考Volantis作者的友链页：</p><div class="site-card-group"><a class="site-card" target="_blank" rel="noopener external nofollow noreferrer" href="https://xaoxuu.com/friends/"><div class="img"><img class="no-lightbox" src="" data-lazy-src="https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg"></div><div class="info"><img class="no-lightbox" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png"><span class="title">xaoxuu</span><span class="desc">xaoxuu-友链</span></div></a></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><div class="tip info"><p>思路拓展：考虑到自动更新是读取issues，而有一款评论是直接将评论变为issues进行提交。也就是gitalk评论。想必头脑灵活的读者已经有思路了。<del>主要是我自己懒得写了。</del></p></div><hr><h2 id="更多好帖"><a href="#更多好帖" class="headerlink" title="更多好帖"></a>更多好帖</h2><ol><li>由<a target="_blank" rel="noopener external nofollow noreferrer" href="https://blog.zykjofficial.top/">@卓越科技</a>基于<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.antmoe.com/">@小康</a>的<code>issues</code>提交友链更新方案和<a target="_blank" rel="noopener external nofollow noreferrer" href="https://cyfan.top/">@ChenYFan</a>的博客站点自动截图方案制作。同时还实现了在Butterfly原版友链的基础上新增了鼠标悬停显示站点预览图的功能。<a class="ghcard" rel="external nofollow noopener noreferrer noopener" target="_blank" href="https://github.com/zykjofficial-actions/screen_shot"><img class="no-lightbox" src="" data-lazy-src="https://github-readme-stats.vercel.app/api/pin/?username=zykjofficial-actions&repo=screen_shot&theme=vue&show_owner=true"></a></li></ol><h2 id="可能出现的BUG"><a href="#可能出现的BUG" class="headerlink" title="可能出现的BUG"></a>可能出现的BUG</h2><div class="tabs" id="bug"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#bug-1">fancybox强制套壳(已修复)</button></li><li class="tab"><button type="button" data-href="#bug-2">根据ISSUES写入友链无效</button></li><li class="tab"><button type="button" data-href="#bug-3">flexcard头像偏移</button></li><li class="tab"><button type="button" data-href="#bug-4">使用友链后相册样式严重偏移(已修复)</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="bug-1"><p></p><div class="note info flat"><p>根据<a target="_blank" rel="noopener external nofollow noreferrer" href="https://blog.zhheo.com/">Heo</a>的反馈的<del>BUG</del>特性，如果开启了<code>fancybox</code>或者<code>medium_zoom</code>功能，会在页面编译时给<code>img</code>便签强行渲染上<code>fancybox</code>或者<code>medium_zoom</code>的外壳，导致小概率的点击图片放大时，会同时跳转到友链页。<del>（反正我都是正常放大图片，没有跳转的情况。）</del></p></div><br>解决方案（相对的，友链图片将无法放大，酌情修改）：<p></p><ol><li><del>关闭fancybox，一劳永逸。</del></li><li>给友链页的img标签添加禁止点击属性<code>style=&quot;pointer-events:none;&quot;</code>。使用内联样式，使得只对友链页生效而不会影响其他页面的<code>fancybox</code>渲染。修改<code>[Blogroot]\themes\butterfly\layout\includes\page\flink.pug</code><br><div class="tip warning"><p>示例可能不是最新，注意内联样式的添加位置即可。</p></div><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">    if theme.lazyload.enable</span><br><span class="line"><span class="deletion">-     img(data-lazy-src=siteshot onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.post_page) + `&#x27;` alt=&#x27;&#x27; )</span></span><br><span class="line"><span class="addition">+     img(style=&quot;pointer-events:none;&quot; data-lazy-src=siteshot onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.post_page) + `&#x27;` alt=&#x27;&#x27; )</span></span><br><span class="line">    else</span><br><span class="line">      img(src=siteshot onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.post_page) + `&#x27;` alt=&#x27;&#x27; )</span><br><span class="line">  .info</span><br><span class="line">    if theme.lazyload.enable</span><br><span class="line"><span class="deletion">-     img(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.flink) + `&#x27;` alt=&#x27;&#x27; )</span></span><br><span class="line"><span class="addition">+     img(style=&quot;pointer-events:none;&quot; data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.flink) + `&#x27;` alt=&#x27;&#x27; )</span></span><br><span class="line">    else</span><br><span class="line">      img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src=&#x27;` + url_for(theme.error_img.flink) + `&#x27;` alt=&#x27;&#x27; )</span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="bug-2"><p><code>issues</code>写入友链需要<code>jquery</code>支持，<code>Butterfly_v3.4.0</code>以后实现去<code>jquery</code>化，需要自己添加<code>jquery</code>。还得保证加载顺序在<code>issues.js</code>之前。<br></p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">    inject:</span><br><span class="line">      head:</span><br><span class="line">      bottom:</span><br><span class="line"><span class="addition">+       - &lt;script src=&quot; https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line">        - &lt;script defer src=&quot;https://npm.elemecdn.com/hexo-theme-volantis@4.3.1/source/js/issues.min.js&quot;&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure><p></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="bug-3"><div class="note info flat"><p>部分读者反馈，在使用<code>flexcard</code>样式的友链时，头像被遮盖半个，无法完全显示。</p><ol><li>主要原因是开启了<code>fancybox</code>，强制给图片套了个壳，导致部分样式被覆写。</li><li>次要原因是对<code>flex</code>的布局适用性较差。</li></ol></div><p>解决方案,修改<code>[Blogroot]\themes\butterfly\source\css\_page\flink.styl</code>中关于<code>flexcard</code>的样式逻辑，使用<code>!important</code>控制权重。<br></p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">  .info</span><br><span class="line"><span class="deletion">-   display flex</span></span><br><span class="line"><span class="addition">+   display block!important</span></span><br><span class="line">    flex-direction column</span><br><span class="line">    justify-content center</span><br><span class="line">    align-items center</span><br><span class="line">    width 100%</span><br><span class="line">    height 100%</span><br><span class="line">    overflow hidden</span><br><span class="line">    border-radius 3px</span><br><span class="line">    background-color hsla(0, 0%, 100%, .7)</span><br><span class="line">    transition transform .5s cubic-bezier(.6, .2, .1, 1) 0s</span><br><span class="line"><span class="addition">+   .fancybox</span></span><br><span class="line"><span class="addition">+     overflow visible!important</span></span><br><span class="line">    img</span><br><span class="line">      position relative</span><br><span class="line">      top 22px</span><br><span class="line">      width 66px</span><br><span class="line">      height 66px</span><br><span class="line">      border-radius 50%</span><br><span class="line">      box-shadow 0 0 10px rgba(0, 0, 0, .3)</span><br><span class="line">      z-index 1</span><br><span class="line">      text-align center</span><br><span class="line">      pointer-events none</span><br><span class="line">    span</span><br><span class="line"><span class="addition">+     display block!important</span></span><br><span class="line">      padding 20px 10% 60px 10%</span><br><span class="line">      font-size 16px</span><br><span class="line">      width 100%</span><br><span class="line">      text-align center</span><br><span class="line">      box-shadow 0 0 10px rgba(0, 0, 0, .3)</span><br><span class="line">      background-color hsla(0, 0%, 100%, .7)</span><br><span class="line">      color var(--font-color)</span><br><span class="line">      white-space nowrap</span><br><span class="line">      overflow hidden</span><br><span class="line">      text-overflow ellipsis</span><br></pre></td></tr></table></figure><p></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="bug-4"><div class="note info flat"><p>部分读者反馈，在使用<code>flexcard</code>样式的友链时，Butterfly的gallery相册样式出现严重偏移。推测是友链样式中某个标签定位重写的作用域没有限制好，导致堆叠样式重构。</p></div><p>紧急修复方案如下：<br>在自定义样式中加入以下内容：<br></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*相册页面定位修复*/</span></span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">div</span> &gt; <span class="selector-tag">img</span>,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">figure</span> &gt; <span class="selector-tag">img</span>,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">a</span> &gt; <span class="selector-tag">a</span> &gt; <span class="selector-tag">img</span>,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">div</span> &gt; <span class="selector-tag">a</span> &gt; <span class="selector-tag">img</span>,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">figure</span> &gt; <span class="selector-tag">a</span> &gt; <span class="selector-tag">img</span>,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">a</span> &gt; svg,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">div</span> &gt; svg,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">figure</span> &gt; svg,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">a</span> &gt; <span class="selector-tag">a</span> &gt; svg,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">div</span> &gt; <span class="selector-tag">a</span> &gt; svg,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">figure</span> &gt; <span class="selector-tag">a</span> &gt; svg&#123;</span><br><span class="line">  <span class="attribute">position</span>:static<span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><br>如果不清楚怎么修改自定义css的读者可以参考站内教程：<a href="/posts/ebf20e02/">自定义魔改样式及示例</a><p></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="TO-DO"><a href="#TO-DO" class="headerlink" title="TO DO"></a>TO DO</h2><div class="checkbox blue checked"><input type="checkbox" checked><p>flink.pug魔改，移值Volantis的site-card样式</p></div><div class="checkbox blue checked"><input type="checkbox" checked><p>保留原版友链，通过配置文件切换样式</p></div><div class="checkbox blue checked"><input type="checkbox" checked><p>siteshot站点预览图批量半自动化截图</p></div><div class="checkbox blue checked"><input type="checkbox" checked><p>使用issues，经审批后自动更新友链</p></div></article><div class="post-copyright"><div class="post-copyright__title"><span class="post-copyright-info"><h>Friend Link Card Beautify</h></span></div><div class="post-copyright__type"><span class="post-copyright-info"><a href="https://akilar.top/posts/57291286/">https://akilar.top/posts/57291286/</a></span></div><div class="post-copyright-m"><div class="post-copyright-m-info"><div class="post-copyright-a"><h>作者</h><div class="post-copyright-cc-info"><h>Akilar</h></div></div><div class="post-copyright-c"><h>发布于</h><div class="post-copyright-cc-info"><h>2020-12-01</h></div></div><div class="post-copyright-u"><h>更新于</h><div class="post-copyright-cc-info"><h>2022-03-02</h></div></div><div class="post-copyright-c"><h>许可协议</h><div class="post-copyright-cc-info"><a class="icon" rel="noopener external nofollow noreferrer" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a><a rel="noopener external nofollow noreferrer" target="_blank" title="CC BY-NC-SA 4.0" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div></div></div></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%F0%9F%93%81Hexo/">📁Hexo</a><a class="post-meta__tags" href="/tags/%F0%9F%A6%8BButterfly/">🦋Butterfly</a></div><div class="post_share"></div></div><link rel="stylesheet" href="https://npm.elemecdn.com/akiblog@1.0.1/css/coin.css" media="defer" onload='this.media="all"'><div class="post-reward"><button class="tip-button reward-button"><span class="tip-button__text">不给糖果就捣蛋</span><div class="coin-wrapper"><div class="coin"><div class="coin__middle"></div><div class="coin__back"></div><div class="coin__front"></div></div></div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://npm.elemecdn.com/akiblog@1.0.1/img/wechat.png" rel="external nofollow noreferrer" target="_blank"><img class="post-qr-code-img" src="" data-lazy-src="https://npm.elemecdn.com/akiblog@1.0.1/img/wechat.png" alt="wechat"></a><div class="post-qr-code-desc">wechat</div></li><li class="reward-item"><a href="https://npm.elemecdn.com/akiblog@1.0.1/img/alipay.png" rel="external nofollow noreferrer" target="_blank"><img class="post-qr-code-img" src="" data-lazy-src="https://npm.elemecdn.com/akiblog@1.0.1/img/alipay.png" alt="alipay"></a><div class="post-qr-code-desc">alipay</div></li></ul></div></button></div><audio id="coinAudio" src="https://npm.elemecdn.com/akilar-candyassets/audio/aowu.m4a"></audio><script defer src="https://npm.elemecdn.com/akiblog@1.0.1/js/custom/coin.js"></script><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="javascript:void(0);" rel="external nofollow noreferrer" onclick="SAONotify(&quot;Prev Post&quot;,&quot;是否跳转至上一篇：&lt;br&gt;Butterfly主题的PWA实现方案&quot;,&quot;pjax.loadUrl('/posts/8f31c3d0/')&quot;)" title="Butterfly主题的PWA实现方案"><i class="fas fa-chevron-left prev-icon"><div class="prev-label">上一篇</div></i></a><div class="pagination-card"><img class="prev-cover" src="" data-lazy-src="https://img.zcool.cn/community/01f28461e1626511013f01cd1d05d8.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100" onerror='onerror=null,src="https://npm.elemecdn.com/akiblog@1.0.1/img/loading.gif"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Butterfly主题的PWA实现方案</div></div></div></div><div class="next-post pull-right"><a href="javascript:void(0);" rel="external nofollow noreferrer" onclick="SAONotify(&quot;Next Post&quot;,&quot;是否跳转至下一篇：&lt;br&gt;Hexo博客静态资源加速&quot;,&quot;pjax.loadUrl('/posts/969dffe3/')&quot;)" title="Hexo博客静态资源加速"><i class="fas fa-chevron-right next-icon"><div class="next-label">下一篇</div></i></a><div class="pagination-card"><img class="next-cover" src="" data-lazy-src="https://img.zcool.cn/community/01593e61dd8ce411013e8cd0aa8bab.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100" onerror='onerror=null,src="https://npm.elemecdn.com/akiblog@1.0.1/img/loading.gif"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Hexo博客静态资源加速</div></div></div></div></nav><div class="business-center"><div class="business-card"><div class="business-flip"><div class="business-front"><div class="business-strip-bottom"></div><div class="business-strip-top"></div><img class="business-logo" width="80" height="80" src="" data-lazy-src="https://npm.elemecdn.com/akiblog@1.0.1/img/cardcode.png" alt="cardcode"><div class="business-Invitation">Invitation</div><div class="business-chip"><div class="business-chip-line"></div><div class="business-chip-line"></div><div class="business-chip-line"></div><div class="business-chip-line"></div><div class="business-chip-main"></div></div><svg class="business-wave" viewBox="0 3.71 26.959 38.787" width="26.959" height="38.787" fill="white"><path d="M19.709 3.719c.266.043.5.187.656.406 4.125 5.207 6.594 11.781 6.594 18.938 0 7.156-2.469 13.73-6.594 18.937-.195.336-.57.531-.957.492a.9946.9946 0 0 1-.851-.66c-.129-.367-.035-.777.246-1.051 3.855-4.867 6.156-11.023 6.156-17.718 0-6.696-2.301-12.852-6.156-17.719-.262-.317-.301-.762-.102-1.121.204-.36.602-.559 1.008-.504z"></path><path d="M13.74 7.563c.231.039.442.164.594.343 3.508 4.059 5.625 9.371 5.625 15.157 0 5.785-2.113 11.097-5.625 15.156-.363.422-1 .472-1.422.109-.422-.363-.472-1-.109-1.422 3.211-3.711 5.156-8.551 5.156-13.843 0-5.293-1.949-10.133-5.156-13.844-.27-.309-.324-.75-.141-1.114.188-.367.578-.582.985-.542h.093z"></path><path d="M7.584 11.438c.227.031.438.144.594.312 2.953 2.863 4.781 6.875 4.781 11.313 0 4.433-1.828 8.449-4.781 11.312-.398.387-1.035.383-1.422-.016-.387-.398-.383-1.035.016-1.421 2.582-2.504 4.187-5.993 4.187-9.875 0-3.883-1.605-7.372-4.187-9.875-.321-.282-.426-.739-.266-1.133.164-.395.559-.641.984-.617h.094zM1.178 15.531c.121.02.238.063.344.125 2.633 1.414 4.437 4.215 4.437 7.407 0 3.195-1.797 5.996-4.437 7.406-.492.258-1.102.07-1.36-.422-.257-.492-.07-1.102.422-1.359 2.012-1.075 3.375-3.176 3.375-5.625 0-2.446-1.371-4.551-3.375-5.625-.441-.204-.676-.692-.551-1.165.122-.468.567-.785 1.051-.742h.094z"></path></svg><div class="business-card-number"><div class="business-section">Akilar</div><div class="business-section">589330978</div></div><div class="business-end"><span class="business-end-text">created:</span><span class="business-end-date">14/10/2022</span></div><div class="business-card-holder">Welcome to Candyhome</div><div class="business-master"><div class="business-circle business-master-red"></div><div class="business-circle business-master-yellow"></div></div></div><div class="business-back"><div class="business-strip-black"></div><div class="business-ccv"><label>sitelink</label><div><a target="_blank" rel="noopener external nofollow noreferrer" href="https://jq.qq.com/?_wv=1027&k=5o4Iga8D">加入群聊【🧊Akilarの糖果屋🍭】</a></div></div><div class="business-terms"><p>Use this card to join the candyhome and participate in a pleasant discussion together .</p><p>Welcome to Akilar's candyhome,wish you a nice day .</p></div></div></div></div></div><hr><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i> <span>评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-author"><div class="item-headline"><i class="fa-solid fa-circle-user"></i><span>作者信息</span></div><div class="author-main-content"><div class="author-check-content"><label class="author-info" for="author-info"><input id="author-info" type="checkbox" name="author-info"><div class="author-avatar"><img src="" data-lazy-src="https://npm.elemecdn.com/akiblog@1.0.1/img/author.webp" onerror='this.onerror=null,this.src="https://npm.elemecdn.com/akiblog@1.0.1/img/404.gif"' alt="avatar"></div><div class="author-name">Akilar</div></label></div><div class="author-switch-content"><input class="switch-content" type="radio" name="switch-content" value="description"><label class="author-description-box"><div class="author-description">流水幽吟绕耳边，<br>煦风馨语抚心弦，<br>挥臂欲揽冰钩月，<br>银星斟酌醉人涎。</div></label><input class="switch-content" type="radio" name="switch-content" value="social" checked><label class="author-social-box"><a class="card-author-button" target="_blank" rel="noopener external nofollow noreferrer" href="https://jq.qq.com/?_wv=1027&amp;k=tNuEdliQ"><i class="fa fa-paper-plane faa-tada"></i><span>加入糖果屋群聊</span></a><div class="social-icons"><a class="social-icon faa-parent animated-hover" href="https://github.com/Akilarlxh" rel="external nofollow noreferrer" target="_blank" title="Github"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-identity-01"></use></svg></a><a class="social-icon faa-parent animated-hover" href="mailto:Akilarlxh@gmail.com" rel="external nofollow noreferrer" target="_blank" title="Email"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-Openmail-01"></use></svg></a><a class="social-icon faa-parent animated-hover" href="https://space.bilibili.com/22976782" rel="external nofollow noreferrer" target="_blank" title="Bilibili"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-film-01"></use></svg></a><a class="social-icon faa-parent animated-hover" href="https://music.163.com/#/user/home?id=292643778" rel="external nofollow noreferrer" target="_blank" title="Cloudmusic"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-songlist-01"></use></svg></a><a class="social-icon faa-parent animated-hover" href="/atom.xml" target="_blank" title="RSS"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-pushpin-01"></use></svg></a></div></label><input class="switch-content" type="radio" name="switch-content" value="site-data"><label class="author-data-box"><div class="site-data"><a class="data-item" href="/archives/"><div class="data-name">文章</div><div class="data-length">480</div></a><a class="data-item" href="/tags/"><div class="data-name">标签</div><div class="data-length">63</div></a><a class="data-item" href="/categories/"><div class="data-name">分类</div><div class="data-length">6</div></a></div></label></div></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%80%9D%E8%B7%AF%E8%A7%A3%E8%AF%BB"><span class="toc-number">1.</span> <span class="toc-text">思路解读</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%AD%94%E6%94%B9%E6%AD%A5%E9%AA%A4"><span class="toc-number">2.</span> <span class="toc-text">魔改步骤</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AB%99%E7%82%B9%E5%9B%BE%E7%89%87%E6%89%B9%E9%87%8F%E5%8D%8A%E8%87%AA%E5%8A%A8%E6%88%AA%E5%9B%BE"><span class="toc-number">3.</span> <span class="toc-text">站点图片批量半自动截图</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95"><span class="toc-number">3.1.</span> <span class="toc-text">使用方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%90%E4%BA%A4issues%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0%E5%8F%8B%E9%93%BE"><span class="toc-number">4.</span> <span class="toc-text">提交issues自动更新友链</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%9A%E5%AE%A2%E9%85%8D%E7%BD%AE"><span class="toc-number">4.1.</span> <span class="toc-text">博客配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%93%E5%BA%93%E9%85%8D%E7%BD%AE"><span class="toc-number">4.2.</span> <span class="toc-text">仓库配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9B%B4%E5%A4%9A%E5%86%85%E5%AE%B9"><span class="toc-number">4.3.</span> <span class="toc-text">更多内容</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9B%B4%E5%A4%9A%E5%A5%BD%E5%B8%96"><span class="toc-number">5.</span> <span class="toc-text">更多好帖</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%AF%E8%83%BD%E5%87%BA%E7%8E%B0%E7%9A%84BUG"><span class="toc-number">6.</span> <span class="toc-text">可能出现的BUG</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TO-DO"><span class="toc-number">7.</span> <span class="toc-text">TO DO</span></a></li></ol></div></div><div class="card-widget card-recommend-post"><div class="item-headline"><i class="fas fa-dharmachakra"></i><span>相关推荐</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/posts/f08df520/" title="重写了一个侧栏作者卡片。搭配侧栏卡片修改一起使用。"><img src="" data-lazy-src="https://img.zcool.cn/community/01a6b161e1626511013f01cd9953a2.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100" alt="重写了一个侧栏作者卡片。搭配侧栏卡片修改一起使用。"></a><div class="content"><a class="title" href="/posts/f08df520/" title="源计划-方舟：作者卡片">源计划-方舟：作者卡片</a><time datetime="2022-12-31" title="发表于 2022-12-31">2022-12-31</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/70bdebb6/" title="新版的赛博风格侧栏版块，不包括作者卡片，作者卡片准备单独写"><img src="" data-lazy-src="https://img.zcool.cn/community/0183d061dd8ce511013e8cd04451eb.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100" alt="新版的赛博风格侧栏版块，不包括作者卡片，作者卡片准备单独写"></a><div class="content"><a class="title" href="/posts/70bdebb6/" title="源计划-方舟：侧栏卡片样式修改">源计划-方舟：侧栏卡片样式修改</a><time datetime="2022-12-25" title="发表于 2022-12-25">2022-12-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/89a3474c/" title="给电脑端和手机端分别写了款侧栏按钮样式。也可以自己挑其中之一全局应用。"><img src="" data-lazy-src="https://img.zcool.cn/community/01729c61dd8ce711013f01cd0f12a3.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100" alt="给电脑端和手机端分别写了款侧栏按钮样式。也可以自己挑其中之一全局应用。"></a><div class="content"><a class="title" href="/posts/89a3474c/" title="源计划-方舟：侧栏按钮样式修改">源计划-方舟：侧栏按钮样式修改</a><time datetime="2022-12-26" title="发表于 2022-12-26">2022-12-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/934cd448/" title="侧栏标签卡片和标签页面改动。换成存储卡样式。"><img src="" data-lazy-src="https://img.zcool.cn/community/01729c61dd8ce711013f01cd0f12a3.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100" alt="侧栏标签卡片和标签页面改动。换成存储卡样式。"></a><div class="content"><a class="title" href="/posts/934cd448/" title="源计划-方舟：存储卡样式标签">源计划-方舟：存储卡样式标签</a><time datetime="2023-01-04" title="发表于 2023-01-04">2023-01-04</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/3e4b194c/" title="试做中较为满意的标题样式风格，单独发文"><img src="" data-lazy-src="https://img.zcool.cn/community/0125fe61e57b6111013e8cd04af4a2.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100" alt="试做中较为满意的标题样式风格，单独发文"></a><div class="content"><a class="title" href="/posts/3e4b194c/" title="源计划-方舟：标题样式修改">源计划-方舟：标题样式修改</a><time datetime="2022-12-25" title="发表于 2022-12-25">2022-12-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/3b78b69a/" title="给Butterfly魔改的内容添加pjax适配。得益于已经有内置的方法函数，可以快速配置。"><img src="" data-lazy-src="https://img.zcool.cn/community/01ad1261e1626511013e8cd01221da.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100" alt="给Butterfly魔改的内容添加pjax适配。得益于已经有内置的方法函数，可以快速配置。"></a><div class="content"><a class="title" href="/posts/3b78b69a/" title="Butterfly的Pjax适配方案">Butterfly的Pjax适配方案</a><time datetime="2020-11-18" title="发表于 2020-11-18">2020-11-18</time></div></div></div></div></div></div></main><footer id="footer"><div id="ark-footer-wraper"><div class="ark-footer-container"><div class="ark-footer-left-corner"><div id="ark-footer-bdage-container"><div class="ark-footer-bdage swiper-wrapper"><a class="ark-bdage-item swiper-slide" href="https://hexo.io/" rel="external nofollow noreferrer" title="博客框架为Hexo_v6.2.0" target="_blank"><svg class="icon ark-decoration" aria-hidden="true"><use xlink:href="#icon-hexo"></use></svg><span>Frame-Hexo</span></a><a class="ark-bdage-item swiper-slide" href="https://butterfly.js.org/" rel="external nofollow noreferrer" title="主题版本Butterfly_v4.4.0" target="_blank"><svg class="icon ark-decoration" aria-hidden="true"><use xlink:href="#icon-Butterfly"></use></svg><span>Theme-Butterfly</span></a><a class="ark-bdage-item swiper-slide" href="https://www.jsdelivr.com/" rel="external nofollow noreferrer" title="本站使用JsDelivr为静态资源提供CDN加速" target="_blank"><svg class="icon ark-decoration" aria-hidden="true"><use xlink:href="#icon-jsdelivr"></use></svg><span>CDN-jsDelivr</span></a><a class="ark-bdage-item swiper-slide" href="https://console.dogecloud.com/" rel="external nofollow noreferrer" title="本网站由多吉云提供CDN加速服务" target="_blank"><svg class="icon ark-decoration" aria-hidden="true"><use xlink:href="#icon-DOGE"></use></svg><span>CDN-dogecloud</span></a><a class="ark-bdage-item swiper-slide" href="https://beian.miit.gov.cn" title="本站已在工信部备案，备案号浙ICP备-2021026687号" target="_blank"><svg class="icon ark-decoration" aria-hidden="true"><use xlink:href="#icon-a-255_icp-license"></use></svg><span>ICP-2021026687-1</span></a><a class="ark-bdage-item swiper-slide" href="https://icp.gov.moe/?keyword=20212887" title="本站已加入萌ICP豪华套餐，萌ICP备20212887号" target="_blank"><svg class="icon ark-decoration" aria-hidden="true"><use xlink:href="#icon-space_demo_equipment"></use></svg><span>moeICP-20212887</span></a><a class="ark-bdage-item swiper-slide" href="https://www.netlify.com/" rel="external nofollow noreferrer" title="本站默认线路托管于Netlify" target="_blank"><svg class="icon ark-decoration" aria-hidden="true"><use xlink:href="#icon-netlify"></use></svg><span>Hosted-Netlify</span></a><a class="ark-bdage-item swiper-slide" href="https://github.com/" rel="external nofollow noreferrer" title="本站项目由Github托管" target="_blank"><svg class="icon ark-decoration" aria-hidden="true"><use xlink:href="#icon-GitHub"></use></svg><span>Source-Github</span></a><a class="ark-bdage-item swiper-slide" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow noreferrer" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可" target="_blank"><svg class="icon ark-decoration" aria-hidden="true"><use xlink:href="#icon-copyright"></use></svg><span>Copyright-BY-NC-SA-4</span></a></div></div><div class="ark-footer-copyright">&copy;2016 - 2023 By Akilar</div><a class="ark-footer-record" target="_blank" rel="noopener" href="https://beian.miit.gov.cn" title="浙ICP备-2021026687号">浙ICP备-2021026687号</a></div><div class="ark-footer-right-corner"><div id="workboard"></div><script async src="/js/custom/runtime.js"></script></div></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open faa-pulse animated-hover"></i><span>阅读模式</span></button><button id="translateLink" type="button" title="简繁转换"><i>繁</i><span>简繁转换</span></button><a class="icon-V hidden" onclick="switchNightMode()" title="昼夜切换"><svg class="faa-pulse animated-hover" width="25" height="25" viewBox="0 0 1024 1024"><use id="modeicon" xlink:href="#icon-moon"></use></svg><span>昼夜切换</span></a><button id="hide-aside-btn" type="button" title="侧栏显隐"><i class="fas fa-arrows-alt-h faa-pulse animated-hover"></i><span>侧栏显隐</span></button><button id="SAO_Utils_Switch" type="button" title="右键开关" onclick="panelAudio(),SAOSwitch()"><i class="fas fa-mouse faa-pulse animated-hover"></i><span>右键开关</span></button><button id="SAO_Utils_Refresh" type="button" title="点击刷新" onclick="panelAudio(),fetchCommits()"><i class="fa-solid fa-arrows-rotate faa-pulse animated-hover"></i><span>点击刷新</span></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin faa-pulse animated-hover"></i><span>设置</span></button><button id="ranklist_show" type="button" title="打赏榜单" onclick="panelAudio(),RanklistBtn()"><i class="fas fa-fire-alt faa-pulse animated-hover"></i><span>打赏榜单</span></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul faa-pulse animated-hover"></i><span>目录</span></button><button id="chat_btn" type="button" title="与我联系"><i class="fas fa-sms faa-pulse animated-hover"></i><span>与我联系</span></button><button id="to_comment" type="button" title="直达评论" onclick="FixedCommentBtn()"><i class="fas fa-comments faa-pulse animated-hover"></i><span>直达评论</span></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up faa-pulse animated-hover"></i><span>回到顶部</span></button></div></div><div id="algolia-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="search-wrap"><div id="algolia-search-input"></div><hr><div id="algolia-search-results"><div id="algolia-hits"></div><div id="algolia-pagination"></div><div id="algolia-info"><div class="algolia-stats"></div><div class="algolia-poweredBy"></div></div></div></div></div><div id="search-mask"></div></div><div><script async src="https://npm.elemecdn.com/akiblog@1.0.1/js/custom/async.js"></script><script src="https://npm.elemecdn.com/akiblog@1.0.1/js/utils.js"></script><script src="https://npm.elemecdn.com/akiblog@1.0.1/js/main.js"></script><script defer src="https://npm.elemecdn.com/swiper@8.4.2/swiper-bundle.min.js"></script><script defer data-pjax src="/js/custom/swiper_init.js"></script><script src="https://npm.elemecdn.com/akiblog@1.0.1/js/tw_cn.js"></script><script src="https://npm.elemecdn.com/medium-zoom@1.0.6/dist/medium-zoom.min.js"></script><script src="https://npm.elemecdn.com/instant.page@5.1.1/instantpage.js" type="module"></script><script src="https://npm.elemecdn.com/vanilla-lazyload@17.3.1/dist/lazyload.iife.min.js"></script><script src="https://npm.elemecdn.com/node-snackbar@0.1.16/dist/snackbar.min.js"></script><script src="https://npm.elemecdn.com/algoliasearch@4.14.2/dist/algoliasearch-lite.umd.js"></script><script src="https://npm.elemecdn.com/instantsearch.js@4.44.0/dist/instantsearch.production.min.js"></script><script src="https://npm.elemecdn.com/akiblog@1.0.1/js/search/algolia.js"></script><div class="pjax-reload"><script async>var preloader={endLoading:()=>{if(document.body.style.overflow="auto",document.getElementById("loading-box").style.transition="opacity 3s",document.getElementById("loading-box").style.opacity="0",setTimeout((function(){document.getElementById("loading-box").classList.add("loaded")}),3e3),sessionStorage.getItem("isReload"))return!0;sessionStorage.setItem("isReload",!0),SAONotify("Welcome","欢迎光临糖果屋<br>愿你享受愉快的一天")},initLoading:()=>{document.body.style.overflow="",document.getElementById("loading-box").style.transition="",document.getElementById("loading-box").style.opacity="1",document.getElementById("loading-box").classList.remove("loaded")}};window.addEventListener("load",()=>{preloader.endLoading()}),document.getElementById("loading-box").addEventListener("click",()=>{preloader.endLoading()}),setTimeout((function(){preloader.endLoading()}),3e3)</script></div><div class="js-pjax"><script>(()=>{const t=()=>{twikoo.init(Object.assign({el:"#twikoo-wrap",envId:"https://twikoo-service.akilar.top",region:"",onCommentLoaded:function(){btf.loadLightbox(document.querySelectorAll("#twikoo .tk-content img:not(.tk-owo-emotion)"))}},null))},o=()=>{"object"!=typeof twikoo?getScript("https://npm.elemecdn.com/twikoo@1.6.5/dist/twikoo.all.min.js").then(t):setTimeout(t,0)};btf.loadComment(document.getElementById("twikoo-wrap"),o)})()</script></div><script>window.addEventListener("load",()=>{const e=e=>{let t="";if(e.length)for(let n=0;n<e.length;n++){t+="<div class='aside-list-item'>";{const a="data-lazy-src";t+=`<a href='${e[n].url}' class='thumbnail'><img ${a}='${e[n].avatar}' alt='${e[n].nick}'></a>`}t+=`<div class='content'>\n        <a class='comment' href='${e[n].url}' title='${e[n].content}'>${e[n].content}</a>\n        <div class='name'><span>${e[n].nick} / </span><time datetime="${e[n].date}">${btf.diffDate(e[n].date,!0)}</time></div>\n        </div></div>`}else t+="没有评论";let n=document.querySelector("#card-newest-comments .aside-list");n.innerHTML=t,window.lazyLoadInstance&&window.lazyLoadInstance.update(),window.pjax&&window.pjax.refresh(n)},t=()=>{if(document.querySelector("#card-newest-comments .aside-list")){const t=saveToLocal.get("twikoo-newest-comments");t?e(JSON.parse(t)):(()=>{const t=()=>{twikoo.getRecentComments({envId:"https://twikoo-service.akilar.top",region:"",pageSize:5,includeReply:!0}).then((function(t){const n=t.map(e=>{return{content:(t=e.comment,""===t||(t=(t=(t=(t=t.replace(/<img.*?src="(.*?)"?[^\>]+>/gi,"[图片]")).replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi,"[链接]")).replace(/<pre><code>.*?<\/pre>/gi,"[代码]")).replace(/<[^>]+>/g,"")).length>150&&(t=t.substring(0,150)+"..."),t),avatar:e.avatar,nick:e.nick,url:e.url+"#"+e.id,date:new Date(e.created).toISOString()};var t});saveToLocal.set("twikoo-newest-comments",JSON.stringify(n),10/1440),e(n)})).catch((function(e){document.querySelector("#card-newest-comments .aside-list").innerHTML="无法获取评论，请确认相关配置是否正确"}))};"object"==typeof twikoo?t():getScript("https://npm.elemecdn.com/twikoo@1.6.5/dist/twikoo.all.min.js").then(t)})()}};t(),document.addEventListener("pjax:complete",t)})</script><script src="https://npm.elemecdn.com/akiblog@1.0.1/js/custom/sun_moon.js" async></script><script async data-pjax src="https://npm.elemecdn.com/akiblog@1.0.1/js/custom/SAO-NAV.js"></script><script>WIDGET={CONFIG:{modules:"012",background:"5",tmpColor:"FFFFFF",tmpSize:"16",cityColor:"FFFFFF",citySize:"16",aqiColor:"FFFFFF",aqiSize:"16",weatherIconSize:"24",alertIconSize:"18",padding:"10px 10px 10px 10px",shadow:"0",language:"auto",fixed:"false",vertical:"top",horizontal:"left",key:"3da94e567f5e4e88baf90f066f0893c2"}}</script><script defer data-pjax src="https://widget.heweather.net/simple/static/js/he-simple.js?v=1.4.0"></script><script async src="https://npm.elemecdn.com/akiblog@1.0.1/js/custom/random.js"></script><script defer src="https://at.alicdn.com/t/c/font_3344355_e443xsjcmum.js"></script><script src="//code.tidio.co/wgamdwbirypo8casl6rjgtfbs47ny3s7.js" async></script><script>function onTidioChatApiReady(){window.tidioChatApi.hide(),window.tidioChatApi.on("close",(function(){window.tidioChatApi.hide()}))}window.tidioChatApi?window.tidioChatApi.on("ready",onTidioChatApiReady):document.addEventListener("tidioChat-ready",onTidioChatApiReady);var chatBtnFn=()=>{document.getElementById("chat_btn").addEventListener("click",(function(){window.tidioChatApi.show(),window.tidioChatApi.open()}))};chatBtnFn()</script><script src="https://npm.elemecdn.com/pjax@0.2.8/pjax.min.js"></script><script>let pjaxSelectors=["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax","#web_bg","#fixedcard-dashboard"];var pjax=new Pjax({elements:'a:not([target="_blank"])',selectors:pjaxSelectors,cacheBust:!1,analytics:!1,scrollRestoration:!1});document.addEventListener("pjax:send",(function(){if(window.tocScrollFn&&window.removeEventListener("scroll",window.tocScrollFn),window.scrollCollect&&window.removeEventListener("scroll",scrollCollect),"object"==typeof preloader&&preloader.initLoading(),document.getElementById("rightside").style.cssText="opacity: ''; transform: ''",window.aplayers)for(let e=0;e<window.aplayers.length;e++)window.aplayers[e].options.fixed||window.aplayers[e].destroy();"object"==typeof typed&&typed.destroy();const e=document.body.classList;e.contains("read-mode")&&e.remove("read-mode"),"object"==typeof disqusjs&&disqusjs.destroy()})),document.addEventListener("pjax:complete",(function(){window.refreshFn(),document.querySelectorAll("script[data-pjax], .pjax-reload script").forEach(e=>{const t=document.createElement("script"),o=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach(e=>t.setAttribute(e.name,e.value)),t.appendChild(document.createTextNode(o)),e.parentNode.replaceChild(t,e)}),GLOBAL_CONFIG.islazyload&&window.lazyLoadInstance.update(),"function"==typeof chatBtnFn&&chatBtnFn(),"function"==typeof panguInit&&panguInit(),"function"==typeof gtag&&gtag("config","",{page_path:window.location.pathname}),"object"==typeof _hmt&&_hmt.push(["_trackPageview",window.location.pathname]),"function"==typeof loadMeting&&document.getElementsByClassName("aplayer").length&&loadMeting(),"object"==typeof Prism&&Prism.highlightAll(),"object"==typeof preloader&&preloader.endLoading()})),document.addEventListener("pjax:error",e=>{404===e.request.status&&pjax.loadUrl("/404.html")})</script><script>"serviceWorker"in navigator&&(navigator.serviceWorker.controller&&navigator.serviceWorker.addEventListener("controllerchange",(function(){fetch("/json/commits.json").then(e=>e.json().then(e=>{for(var r=e,o=0;o<r.length;o++){r[o];var t=o+1+"."+r[o].commit.message;if(o<1)var n=t;else n=n+"<br>"+t}SAONotify("Latest Update",n,"location.reload(true);")})).catch(console.error)})),window.addEventListener("load",(function(){navigator.serviceWorker.register("/sw.js")})))</script><div id="SAO-back"><div id="SAO-menu"><div id="SAO-menu-content"><div class="utils-list"><div class="utils-list-item"><div class="user-panel" style="top:undefined"><div class="user-panel-name">Friends</div><div class="user-panel-img"><img src="" data-lazy-src="/img/info.png"></div><div class="user-panel-properties">Welcome to Akilar の Candyhome !</div></div><i class="fas fa-address-book" onclick="panelAudio(),UtilsClick()"></i><div class="menu-list" style="top:-83px"><div class="menu-list-item"><i class="fa fa-link" onclick='clickAudio(),setTimeout((function(){SAOclose(),linkStart("/link/")}),500)'>Link</i></div><div class="menu-list-item"><i class="fas fa-fire-alt" onclick="clickAudio(),setTimeout((function(){SAOclose(),RanklistBtn()}),500)">Pantner</i></div></div></div><div class="utils-list-item"><div class="user-panel" style="top:undefined"><div class="user-panel-name">Help</div><div class="user-panel-img"><img src="" data-lazy-src="/img/info.png"></div><div class="user-panel-properties"><h4>Anything can I help you ?</h4><p>Tidio：开启在线聊天窗<br>Comment：直达评论区或留言板<br>Candyhome：加入糖果屋QQ群</p></div></div><i class="fa fa-question-circle" onclick="panelAudio(),UtilsClick()"></i><div class="menu-list" style="top:-103px"><div class="menu-list-item"><i class="fa fa-comment-dots" onclick="clickAudio(),setTimeout((function(){SAOclose(),openTidio()}),500)">Tidio</i></div><div class="menu-list-item"><i class="fa fa-comments" onclick="clickAudio(),setTimeout((function(){SAOclose(),FixedCommentBtn()}),500)">Comments</i></div><div class="menu-list-item"><i class="fa fa-user-friends" onclick='clickAudio(),setTimeout((function(){SAOclose(),linkStart("https://jq.qq.com/?_wv=1027&amp;k=a08BZRzs")}),500)'>Candyhome</i></div></div></div><div class="utils-list-item"><div class="user-panel" style="top:undefined"><div class="user-panel-name">Menu</div><div class="user-panel-img"><img src="" data-lazy-src="/img/info.png"></div><div class="user-panel-properties">The menu of my blog</div></div><i class="fa fa-tasks" onclick="panelAudio(),UtilsClick()"></i><div class="menu-list" style="top:-163px"><div class="menu-list-item"><i class="fa fa-home" onclick='clickAudio(),setTimeout((function(){SAOclose(),linkStart("https://blog.akilar.top/")}),500)'>Home</i></div><div class="menu-list-item"><i class="fa fa-folder-open" onclick="panelAudio(),MenusClick()">Document</i><div class="menu-child" style="top:-100px"><div class="menu-list-child"><i class="fa fa-file-invoice" onclick='clickAudio(),setTimeout((function(){SAOclose(),linkStart("/posts/f99b208/")}),500)'>Beautify</i></div><div class="menu-list-child"><i class="fa fa-file-invoice" onclick='clickAudio(),setTimeout((function(){SAOclose(),linkStart("/posts/7c16c4bb/")}),500)'>Optimize</i></div><div class="menu-list-child"><i class="fa fa-file-invoice" onclick='clickAudio(),setTimeout((function(){SAOclose(),linkStart("/posts/615e2dec/")}),500)'>Tag_Plugins</i></div><div class="menu-list-child"><i class="fa fa-file-invoice" onclick='clickAudio(),setTimeout((function(){SAOclose(),linkStart("/posts/6ef63e2d/")}),500)'>Construct</i></div></div></div><div class="menu-list-item"><i class="fa fa-blog" onclick='clickAudio(),setTimeout((function(){SAOclose(),linkStart("/")}),500)'>Blog</i></div><div class="menu-list-item"><i class="fa fa-archive" onclick='clickAudio(),setTimeout((function(){SAOclose(),linkStart("/archives/")}),500)'>Archives</i></div><div class="menu-list-item"><i class="fa fa-folder-open" onclick='clickAudio(),setTimeout((function(){SAOclose(),linkStart("/categories/")}),500)'>Categoties</i></div><div class="menu-list-item"><i class="fa fa-tags" onclick='clickAudio(),setTimeout((function(){SAOclose(),linkStart("/tags/")}),500)'>Tags</i></div></div></div><div class="utils-list-item"><div class="user-panel" style="top:undefined"><div class="user-panel-name">Options</div><div class="user-panel-img"><img src="" data-lazy-src="/img/info.png"></div><div class="user-panel-properties"><h4>Some userful scripts</h4><p>Random： 随机跳转站内文章<br>Search： 打开搜索窗口</p>Refresh： 刷新缓存</div></div><i class="fa fa-tools" onclick="panelAudio(),UtilsClick()"></i><div class="menu-list" style="top:-103px"><div class="menu-list-item"><i class="fa fa-random" onclick='clickAudio(),setTimeout((function(){SAOclose(),linkStart("/toRandomPost()")}),500)'>Random</i></div><div class="menu-list-item"><i class="fa fa-search" onclick="clickAudio(),setTimeout((function(){SAOclose(),openSearch()}),500)">Search</i></div><div class="menu-list-item"><i class="fa-solid fa-arrows-rotate" onclick='clickAudio(),setTimeout((function(){SAOclose(),SAONotify("Refresh","即将为您刷新页面缓存","location.reload(true);")}),500)'>Refresh</i></div></div></div><div class="utils-list-item"><div class="user-panel"><div class="user-panel-name">Instructions</div><div class="user-panel-img"><img src="" data-lazy-src="/img/siteicon/favicon.png"></div><div class="user-panel-properties"><h4>欢迎使用SAO_Utils_Web 2.0</h4><p>点按选项可以持续显示下级菜单。您可以通过按住<kbd>ctrl</kbd>+<kbd>右键</kbd>来恢复使用原生右键菜单，更多内容可点击右侧Option按钮访问教程或Help按钮加入糖果屋QQ群。</p><center>©Akilarの糖果屋</center></div></div><i class="fa fa-cog" onclick="panelAudio(),UtilsClick()"></i><div class="menu-list" style="top:-103px"><div class="menu-list-item"><i class="fa fa-tools" onclick='clickAudio(),setTimeout((function(){SAOclose(),linkStart("https://akilar.top/posts/fd243d7/")}),500)'>Option</i></div><div class="menu-list-item"><i class="fa fa-question-circle" onclick='clickAudio(),setTimeout((function(){SAOclose(),linkStart("https://jq.qq.com/?_wv=1027&amp;k=a08BZRzs")}),500)'>Help</i></div><div class="menu-list-item"><i class="fa fa-sign-out-alt" onclick="alertAudio(),openLogout()">Logout</i></div></div></div><div class="utils-list-item"><i class="fa fa-power-off" onclick="alertAudio(),SAOKeepOff()" title="永久关闭SAO右键菜单"></i></div></div></div></div></div><div id="SAO-logout"><div class="logout-title">Alert</div><div class="logout-alert">是否确认退出?</div><div class="logout-button"><span class="logout-confirm"><button class="far fa-circle" type="button" name="confirm" onclick="clickAudio(),confirmLogout()"></button></span><span class="logout-cancel"><button class="fa fa-times" type="button" name="cancel" onclick="panelAudio(),cancelLogout()"></button></span></div></div><audio id="SAOlauncher" src="https://npm.elemecdn.com/akilar-candyassets/audio/Launcher.mp3"></audio><audio id="SAOClick" src="https://npm.elemecdn.com/akilar-candyassets/audio/Click.mp3"></audio><audio id="SAOPanel" src="https://npm.elemecdn.com/akilar-candyassets/audio/Panel.mp3"></audio><audio id="SAOAlert" src="https://npm.elemecdn.com/akilar-candyassets/audio/Alert.mp3"></audio><script async src="https://npm.elemecdn.com/akiblog@1.0.1/js/custom/SAO_Menu.js"></script><div id="SAO-ranklist"><div class="ranklist-title">Rank list</div><div class="ranklist-main"><div class="master-item"><div class="master-rank"><i class="fa fa-plus" onclick="panelAudio(),RanklistBtn()"></i></div><div class="master-user"><a alt="" href="/">Akilar<div class="rank-reward"><div class="reward-img"><img alt="" src="" data-lazy-src="https://npm.elemecdn.com/akiblog@1.0.1/img/wechat.png"><a class="reward-text" alt="" href="/null">wechat</a></div><div class="reward-img"><img alt="" src="" data-lazy-src="https://npm.elemecdn.com/akiblog@1.0.1/img/alipay.png"><a class="reward-text" alt="" href="/null">alipay</a></div></div></a></div><div class="master-data"><div class="master-HP"><div class="HP-fill" style="width:20%"><div class="HP-fill-in"><span>20%</span></div></div></div></div><div class="master-level"><span>270</span><span>|</span><span>1350</span><span>lv.23</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢*蓓打赏的￥180">*蓓</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:100%"><div class="HP-fill-in"><span>100.00%</span></div></div></div></div><div class="partner-level"><span>9200</span><span>|</span><span>9200</span><span>lv.180</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢晨打赏的￥8.88">晨</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:88.86%"><div class="HP-fill-in"><span>88.86%</span></div></div></div></div><div class="partner-level"><span>622</span><span>|</span><span>700</span><span>lv.10</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://zfe.space/" data-title="感谢**鄂打赏的￥9.9">**鄂</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:13.76%"><div class="HP-fill-in"><span>13.76%</span></div></div></div></div><div class="partner-level"><span>523</span><span>|</span><span>3800</span><span>lv.72</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢*光打赏的￥50">*光</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:92.59%"><div class="HP-fill-in"><span>92.59%</span></div></div></div></div><div class="partner-level"><span>2685</span><span>|</span><span>2900</span><span>lv.54</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢*洁打赏的￥30">*洁</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:93.78%"><div class="HP-fill-in"><span>93.78%</span></div></div></div></div><div class="partner-level"><span>1688</span><span>|</span><span>1800</span><span>lv.32</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢**焘打赏的￥20">**焘</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:90.92%"><div class="HP-fill-in"><span>90.92%</span></div></div></div></div><div class="partner-level"><span>1182</span><span>|</span><span>1300</span><span>lv.22</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://szsyzx.github.io/" data-title="感谢懒蟲打赏的￥20">懒蟲</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:74.06%"><div class="HP-fill-in"><span>74.06%</span></div></div></div></div><div class="partner-level"><span>1148</span><span>|</span><span>1550</span><span>lv.27</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢*i打赏的￥10">*i</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:83.38%"><div class="HP-fill-in"><span>83.38%</span></div></div></div></div><div class="partner-level"><span>667</span><span>|</span><span>800</span><span>lv.12</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.acozycotage.net/" data-title="感谢acozycotage打赏的￥10">acozycotage</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:NaN%"><div class="HP-fill-in"><span>NaN%</span></div></div></div></div><div class="partner-level"><span>NaN</span><span>|</span><span>NaN</span><span>lv.undefined</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢*因打赏的￥10">*因</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:62.5%"><div class="HP-fill-in"><span>62.50%</span></div></div></div></div><div class="partner-level"><span>625</span><span>|</span><span>1000</span><span>lv.16</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢H*g打赏的￥10">H*g</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:83.38%"><div class="HP-fill-in"><span>83.38%</span></div></div></div></div><div class="partner-level"><span>667</span><span>|</span><span>800</span><span>lv.12</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢**宁打赏的￥10">**宁</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:45.46%"><div class="HP-fill-in"><span>45.46%</span></div></div></div></div><div class="partner-level"><span>591</span><span>|</span><span>1300</span><span>lv.22</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.nesxc.com/" data-title="感谢Nesxc打赏的￥14.88">Nesxc</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:74.42%"><div class="HP-fill-in"><span>74.42%</span></div></div></div></div><div class="partner-level"><span>893</span><span>|</span><span>1200</span><span>lv.20</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢J*y打赏的￥2.56">J*y</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:51.11%"><div class="HP-fill-in"><span>51.11%</span></div></div></div></div><div class="partner-level"><span>230</span><span>|</span><span>450</span><span>lv.5</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.lbihua.cn" data-title="感谢哔哗打赏的￥10">哔哗</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:62.5%"><div class="HP-fill-in"><span>62.50%</span></div></div></div></div><div class="partner-level"><span>625</span><span>|</span><span>1000</span><span>lv.16</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://iori-yimaga.top" data-title="感谢T*0打赏的￥23.3">T*0</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:93.17%"><div class="HP-fill-in"><span>93.17%</span></div></div></div></div><div class="partner-level"><span>1351</span><span>|</span><span>1450</span><span>lv.25</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢**飞打赏的￥20">**飞</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:74.06%"><div class="HP-fill-in"><span>74.06%</span></div></div></div></div><div class="partner-level"><span>1148</span><span>|</span><span>1550</span><span>lv.27</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢**豪打赏的￥10">**豪</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:83.38%"><div class="HP-fill-in"><span>83.38%</span></div></div></div></div><div class="partner-level"><span>667</span><span>|</span><span>800</span><span>lv.12</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.keyiqingxin.cn" data-title="感谢清心打赏的￥3.88">清心</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:19.42%"><div class="HP-fill-in"><span>19.42%</span></div></div></div></div><div class="partner-level"><span>233</span><span>|</span><span>1200</span><span>lv.20</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢鹿栖打赏的￥20">鹿栖</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:74.06%"><div class="HP-fill-in"><span>74.06%</span></div></div></div></div><div class="partner-level"><span>1148</span><span>|</span><span>1550</span><span>lv.27</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://menglei.xyz" data-title="感谢*夢打赏的￥3">*夢</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:27.33%"><div class="HP-fill-in"><span>27.33%</span></div></div></div></div><div class="partner-level"><span>205</span><span>|</span><span>750</span><span>lv.11</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.ijinse.cn" data-title="感谢锦瑟打赏的￥50">锦瑟</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:69.45%"><div class="HP-fill-in"><span>69.45%</span></div></div></div></div><div class="partner-level"><span>2639</span><span>|</span><span>3800</span><span>lv.72</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://glann.vip" data-title="感谢glann打赏的￥5.01">glann</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:41.75%"><div class="HP-fill-in"><span>41.75%</span></div></div></div></div><div class="partner-level"><span>334</span><span>|</span><span>800</span><span>lv.12</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢**忠打赏的￥4.48">**忠</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:89.56%"><div class="HP-fill-in"><span>89.56%</span></div></div></div></div><div class="partner-level"><span>403</span><span>|</span><span>450</span><span>lv.5</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://huran.xyz" data-title="感谢忽然打赏的￥13.14">忽然</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:87.58%"><div class="HP-fill-in"><span>87.58%</span></div></div></div></div><div class="partner-level"><span>832</span><span>|</span><span>950</span><span>lv.15</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢XueZha打赏的￥6.66">XueZha</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:66.57%"><div class="HP-fill-in"><span>66.57%</span></div></div></div></div><div class="partner-level"><span>466</span><span>|</span><span>700</span><span>lv.10</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢*葵打赏的￥6.66">*葵</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:66.57%"><div class="HP-fill-in"><span>66.57%</span></div></div></div></div><div class="partner-level"><span>466</span><span>|</span><span>700</span><span>lv.10</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://tianli-blog.club" data-title="感谢天利打赏的￥40.34">天利</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:77.57%"><div class="HP-fill-in"><span>77.57%</span></div></div></div></div><div class="partner-level"><span>2172</span><span>|</span><span>2800</span><span>lv.52</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://bingmeng158.github.io" data-title="感谢冰梦打赏的￥1.5">冰梦</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:30%"><div class="HP-fill-in"><span>30.00%</span></div></div></div></div><div class="partner-level"><span>135</span><span>|</span><span>450</span><span>lv.5</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://0410wzn.top" data-title="感谢WZN打赏的￥1.35">WZN</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:27.11%"><div class="HP-fill-in"><span>27.11%</span></div></div></div></div><div class="partner-level"><span>122</span><span>|</span><span>450</span><span>lv.5</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢KD打赏的￥1.5">KD</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:30%"><div class="HP-fill-in"><span>30.00%</span></div></div></div></div><div class="partner-level"><span>135</span><span>|</span><span>450</span><span>lv.5</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢**庆打赏的￥3.5">**庆</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:70%"><div class="HP-fill-in"><span>70.00%</span></div></div></div></div><div class="partner-level"><span>315</span><span>|</span><span>450</span><span>lv.5</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.sunguoqi.com" data-title="感谢小孙打赏的￥5.2">小孙</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:52%"><div class="HP-fill-in"><span>52.00%</span></div></div></div></div><div class="partner-level"><span>364</span><span>|</span><span>700</span><span>lv.10</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://blog.nalex.top" data-title="感谢rootlex打赏的￥4">rootlex</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:80%"><div class="HP-fill-in"><span>80.00%</span></div></div></div></div><div class="partner-level"><span>360</span><span>|</span><span>450</span><span>lv.5</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://dreamfall.cn" data-title="感谢梦落打赏的￥1.88">梦落</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:37.56%"><div class="HP-fill-in"><span>37.56%</span></div></div></div></div><div class="partner-level"><span>169</span><span>|</span><span>450</span><span>lv.5</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://blog.cyfan.top" data-title="感谢CYF打赏的￥1.5">CYF</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:30%"><div class="HP-fill-in"><span>30.00%</span></div></div></div></div><div class="partner-level"><span>135</span><span>|</span><span>450</span><span>lv.5</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢一悲打赏的￥2.5">一悲</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:41.6%"><div class="HP-fill-in"><span>41.60%</span></div></div></div></div><div class="partner-level"><span>208</span><span>|</span><span>500</span><span>lv.6</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://hexo.cf" data-title="感谢八神打赏的￥10">八神</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:83.38%"><div class="HP-fill-in"><span>83.38%</span></div></div></div></div><div class="partner-level"><span>667</span><span>|</span><span>800</span><span>lv.12</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://noionion.top" data-title="感谢贰猹打赏的￥20">贰猹</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:90.92%"><div class="HP-fill-in"><span>90.92%</span></div></div></div></div><div class="partner-level"><span>1182</span><span>|</span><span>1300</span><span>lv.22</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://blog.slqwq.cn" data-title="感谢Hajeekn打赏的￥10">Hajeekn</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:66.63%"><div class="HP-fill-in"><span>66.63%</span></div></div></div></div><div class="partner-level"><span>633</span><span>|</span><span>950</span><span>lv.15</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" target="_blank" rel="noopener external nofollow noreferrer" href="https://baokan0.com" data-title="感谢baokan0打赏的￥20">baokan0</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:95.2%"><div class="HP-fill-in"><span>95.20%</span></div></div></div></div><div class="partner-level"><span>1190</span><span>|</span><span>1250</span><span>lv.21</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢h*d打赏的￥10">h*d</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:66.63%"><div class="HP-fill-in"><span>66.63%</span></div></div></div></div><div class="partner-level"><span>633</span><span>|</span><span>950</span><span>lv.15</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢**航打赏的￥10">**航</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:66.63%"><div class="HP-fill-in"><span>66.63%</span></div></div></div></div><div class="partner-level"><span>633</span><span>|</span><span>950</span><span>lv.15</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢I*u打赏的￥2">I*u</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:40%"><div class="HP-fill-in"><span>40.00%</span></div></div></div></div><div class="partner-level"><span>180</span><span>|</span><span>450</span><span>lv.5</span></div></div><div class="partner-item"><div class="partner-rank"></div><div class="partner-user"><a alt="" href="javascript:void(0);" rel="external nofollow noreferrer" data-title="感谢7*i打赏的￥1">7*i</a></div><div class="partner-data"><div class="partner-HP"><div class="HP-fill" style="width:20%"><div class="HP-fill-in"><span>20.00%</span></div></div></div></div><div class="partner-level"><span>90</span><span>|</span><span>450</span><span>lv.5</span></div></div></div></div><script async src="https://npm.elemecdn.com/akiblog@1.0.1/js/custom/SAO_ranklist.js"></script><div class="pjax-reload"><script async>for(var arr=document.getElementsByClassName("recent-post-item"),i=0;i<arr.length;i++)arr[i].classList.add("wow"),arr[i].classList.add("animate__zoomIn"),arr[i].setAttribute("data-wow-duration",""),arr[i].setAttribute("data-wow-delay",""),arr[i].setAttribute("data-wow-offset",""),arr[i].setAttribute("data-wow-iteration","")</script><script async>for(var arr=document.getElementsByClassName("card-widget"),i=0;i<arr.length;i++)arr[i].classList.add("wow"),arr[i].classList.add("animate__zoomIn"),arr[i].setAttribute("data-wow-duration",""),arr[i].setAttribute("data-wow-delay",""),arr[i].setAttribute("data-wow-offset",""),arr[i].setAttribute("data-wow-iteration","")</script><script async>for(var arr=document.getElementsByClassName("article-sort-item"),i=0;i<arr.length;i++)arr[i].classList.add("wow"),arr[i].classList.add("animate__zoomIn"),arr[i].setAttribute("data-wow-duration",""),arr[i].setAttribute("data-wow-delay",""),arr[i].setAttribute("data-wow-offset",""),arr[i].setAttribute("data-wow-iteration","")</script><script async>for(var arr=document.getElementsByClassName("flink-list-card"),i=0;i<arr.length;i++)arr[i].classList.add("wow"),arr[i].classList.add("animate__flipInY"),arr[i].setAttribute("data-wow-duration","1s"),arr[i].setAttribute("data-wow-delay",""),arr[i].setAttribute("data-wow-offset",""),arr[i].setAttribute("data-wow-iteration","")</script></div><script defer src="https://npm.elemecdn.com/akiblog@1.0.1/js/custom/wow.min.js"></script><script defer src="https://npm.elemecdn.com/akiblog@1.0.1/js/custom/wow_init.js"></script><div id="fixedcard-dashboard"><button class="fixedcard-activebtn" type="button" title="用户信息" onclick="FixedCardWidget(&quot;class&quot;,&quot;card-author&quot;,&quot;0&quot;)"><i class="fas fa-address-book"></i></button><button class="fixedcard-activebtn" type="button" title="相关推荐" onclick="FixedCardWidget(&quot;class&quot;,&quot;card-recommend-post&quot;,&quot;0&quot;)"><i class="fas fa-dharmachakra"></i></button><div class="fixedcard-user-avatar fixedcard-activebtn" onclick="RemoveFixedCardWidget()"><img class="fixedcard-user-avatar-img" src="" data-lazy-src="https://npm.elemecdn.com/akiblog@1.0.1/img/author.webp" title="Akilar"></div></div><script defer data-pjax src="https://npm.elemecdn.com/akiblog@1.0.1/js/custom/fixed_card_widget.js"></script><script defer data-pjax src="https://npm.elemecdn.com/akiblog@1.0.1/js/custom/fixed_comment.js"></script></div><script>var fdata={apiurl:"/json/akifcircle.json",initnumber:20,stepnumber:10,error_img:"https://npm.elemecdn.com/akilar-candyassets/image/404.gif"};localStorage.setItem("fdatalist",JSON.stringify(fdata))</script><script defer src="https://npm.elemecdn.com/hexo-filter-fcircle/assets/js/fetch.js"></script><script data-pjax src="https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.js"></script><script data-pjax>function gitcalendar_injector_config(){document.getElementById("recent-posts").insertAdjacentHTML("afterbegin",'<div class="recent-post-item" id="gitcalendarBar" style="width:100%;height:auto;padding:10px;"><style>#git_container{min-height: 280px}@media screen and (max-width:650px) {#git_container{min-height: 0px}}</style><div id="git_loading" style="width:10%;height:100%;margin:0 auto;display: block;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#d0d0d0" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animatetransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animatetransform></path></svg><style>#git_container{display: none;}</style></div><div id="git_container"></div></div>'),console.log("已挂载gitcalendar")}document.getElementById("recent-posts")&&"/"===location.pathname&&(gitcalendar_injector_config(),GitCalendarInit("/json/akicalendar.json",["#e4dfd7","#f9f4dc","#f7e8aa","#f7e8aa","#f8df72","#fcd217","#fcc515","#f28e16","#fb8b05","#d85916","#f43e06"],"Akilarlxh"))</script></body></html>